Nextjs Bootstrap 적용하기

 

사전준비

Nextjs 설치

Bootstrap 설치하기

 

CSS적용

pages/_app.tsx 파일에 css적용

하나만 추가하면 된다.

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

 

최상단에 추가한다.

import "bootstrap/dist/css/bootstrap.min.css";
import '../styles/globals.css'

//...

 

 

JS적용

 

"bootstrap/dist/js/bootstrap.bundle.min.js"

을 사용하면 되지만 경우에 따라서 document찾기 문제가 발생한다.

아래 내용 참고

 

document찾기 문제 방지

 

export default function App({ Component, pageProps }: AppProps) {

  useEffect(() => {
    require("bootstrap/dist/js/bootstrap.bundle.min.js");
  }, []);
  
  // ...
  
  return (
    <>
    // ...
    </>);
}