Next.js 에 React Bootstrap 설치하기

React에 적용하는 방법이랑 똑같다 근데 명확하게 정리를 안해놔서 휴..!

 

다시 적어보도록하자.

 

https://react-bootstrap.github.io/getting-started/introduction

React-Bootstrap

이곳에들어가면 자세한 설명이 있지만

 

npm install react-bootstrap bootstrap@5.1.3

이와같이 프로젝트 안에서 설치해준다.

 

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

그리고 Next.js의 경우에는

__app.js or __app.tsx 상단에 위와같이 불러와준다.

__app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from "../components/Layout";
import Script from 'next/script'
import 'bootstrap/dist/css/bootstrap.min.css';




function MyApp({ Component, pageProps }: AppProps) {
  return <>
  <Layout>
  <Component {...pageProps} />
  </Layout>
  
  {/* <Script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossOrigin="anonymous" /> */}
  {/* 이렇게 crossOrigin */}
  </>
}

export default MyApp

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

그리고 필요한 컴포넌트에가서 위와같이 필요한 부트스트랩 컴포넌트를 import해서 사용한다.

index.tsx

import type { NextPage } from 'next'
import { Container,Row,Col,Dropdown,Accordion, Button} from 'react-bootstrap';


const Home: NextPage = () => {
  // Grid Container용도로만 Bootstrap사용
  return <>
  <Container>
  <Row>
    <Col>1 of 2</Col>
    <Col>2 of 2</Col>
  </Row>
  <Row>
    <Col>1 of 3</Col>
    <Col>2 of 3</Col>
    <Col>3 of 3</Col>
  </Row>
</Container>
<>
  <Button variant="primary">Primary</Button>{' '}
  <Button variant="secondary">Secondary</Button>{' '}
  <Button variant="success">Success</Button>{' '}
  <Button variant="warning">Warning</Button>{' '}
  <Button variant="danger">Danger</Button> <Button variant="info">Info</Button>{' '}
  <Button variant="light">Light</Button> <Button variant="dark">Dark</Button>{' '}
  <Button variant="link">Link</Button>
</>

  </>
   
  
}

export default Home

요악하면

 

1.npm 으로 react 부트스트랩설치

npm install react-bootstrap bootstrap@5.1.3

2.React의 경우에는 src/index.js or App.js 그리고 Next.js의 경우에는 __app.js or __app.tsx 상단에

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

3.필요한 페이지에서 이와같이 import해서 사용 

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

 

ps.CDN으로 사용하는 방법도 있지만 패스, 일단 필요해 보이지 않는다.

Browser globals#

We provide react-bootstrap.js and react-bootstrap.min.js bundles with all components exported on the window.ReactBootstrap object. These bundles are available on unpkg, as well as in the npm package.

<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
  crossorigin></script>

<script
  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>

<script>var Alert = ReactBootstrap.Alert;</script>

이것때문에 조금 헷갈리기도 했는데 npm을 사용하는것자체가 js쪽을 미리 불러와서 사용할 수 있게 해주는거같다.

 

node패키지 모듈에서 bootstrap으로가면 js와 cs등 필요한 파일들이 전부 들어있다.

- 괜히 참고한사이트들

https://runebook.dev/ko/docs/react_bootstrap/getting-started/introduction/index

React Bootstrap - Introduction - 프로젝트에 React Bootstrap을 포함하는 방법 알아보기 Installation React-Bootstra

npm을 사용하는이유

https://davinchicoder.tistory.com/entry/NPM%EC%9D%98-%EC%A0%95%EC%9D%98%EC%99%80-NPM%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-2%EA%B0%80%EC%A7%80-%EC%9D%B4%EC%9C%A0?category=1006816 

NPM의 정의와 NPM을 사용하는 2가지 이유

cdn으로 사용하는법, npm,yarn으로 설치하는법

https://www.copycat.dev/blog/reactjs-bootstrap-how-to-use-bootstrap-in-react-js/

Reactjs Bootstrap: How To Use Bootstrap In React.js? - CopyCat Blog