Next.js에 부트스트랩 추가

11812 단어 beginnersjavascriptwebdevbootstrap
내 생각에 부트스트랩은 여전히 ​​CSS 프레임워크의 OG입니다. Navbar, Cards, Modals 등과 같은 단순성과 기성품 구성 요소 때문에 마음에 듭니다. Tailwind를 사용하더라도 Bootstrap은 여전히 ​​많은 프런트 엔드 개발자가 사용하고 있습니다. 이제 부트스트랩은 버전 5로 더욱 강력해졌습니다.

React 또는 기본 HTML 파일에 부트스트랩을 추가하는 것은 간단하고 직관적인 작업이었습니다. npm를 사용하여 설치를 실행하거나 HTML 파일에 CDN 링크를 추가하기만 하면 됩니다. 그러나 Next.js에서는 프로세스가 그렇게 간단하지 않습니다.

부트스트랩은 두 가지 방법으로 Next.js 애플리케이션에 추가할 수 있습니다. 당신이 선호하는 것을 선택하십시오
  • CDN 사용
  • NPM을 사용하여 설치

    • CDN 링크 사용:



    Bootstrap 5는 jquery를 제거했으므로 JS, Popper 및 CSS만 추가하면 됩니다.

    즐겨찾는 코드 편집기에서 Next.js 프로젝트를 여세요.

    이제 Next.js에는 Link 및 Script 태그를 추가할 수 있는 일반 반응 애플리케이션과 달리 index.html 파일이 없습니다. 따라서 여기서는 _app.js 및 _document.js 파일을 사용해야 합니다. 페이지를 초기화하는 데 사용되는 사용자 지정 앱 및 문서 구성 요소입니다. _app.js는 파일에 이미 생성되어 있습니다. 페이지 폴더에서 _document.js와 함께 _app.js를 생성하면 됩니다. 이제 다음 코드를 _document.js 파일에 붙여넣습니다.

    import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
          crossOrigin="anonymous"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}


    보시다시피 여기에 부트스트랩 스타일시트를 추가했습니다. <Head />는 일반 HTML의 <head/>로 컴파일되는 Next.js의 사용자 지정 구성 요소입니다. 다른 CSS 스타일이나 외부 아이콘 링크가 있는 경우 아래 예에 표시된 대로 여기에 추가할 수 있습니다.

    import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
          crossOrigin="anonymous"
        />
                {* Bootstrap Icons *}
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"></link>
                    {* Google Fonts *}
                <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
        <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"></link>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}


    이제 몇 가지 간단한 부트스트랩 클래스로 애플리케이션을 테스트할 수 있습니다. 문제없이 작동합니다. 그러나 Modal, Navbar 등과 같은 Bootstrap 구성 요소는 JS 및 Popper가 필요하고 아직 가져오지 않았기 때문에 작동하지 않습니다.

    Next.js는 사용자 정의 문서 구성 요소에 스타일시트만 추가하도록 권장하고 모든 외부 스크립트는 사용자 정의 앱 구성 요소에만 추가해야 하므로 JS 및 Popper가 포함된 부트스트랩 스크립트를 여기_document.js 파일에 추가할 수 없습니다. 모범 사례로 간주하십시오.

    주제에 대한 자세한 내용을 보려면 여기에서 해당 문서를 확인하십시오.

    stylesheets-in-head-component | Next.js
    _app.js 코드를 이것으로 변경하십시오.

    import Head from "next/head";
import Script from "next/script";
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>

      <Script
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossOrigin="anonymous"
      />
      <Component {...pageProps} />
    </>
  );
}
export default MyApp;


    모든 작업이 완료되었습니다. 이제 프로젝트에서 Bootstrap을 사용할 수 있습니다!

    NPM을 사용하여 부트스트랩 설치



    부트스트랩을 설치하는 두 번째 방법은 npm(노드 패키지 관리자)를 사용하는 것입니다. 프로젝트 내에서 터미널을 열고 이 명령을 사용하여 Bootstrap 5를 설치합니다.

    npm i bootstrap


    부트스트랩이 설치되면 _app.js에서 부트스트랩 CSS를 가져와야 합니다. App 구성 요소는 모든 페이지에 대해 렌더링되기 때문에 App 구성 요소에서 CSS를 가져옵니다. 따라서 모든 페이지에서 CSS를 가져올 필요가 없습니다.

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


    이제 부트스트랩의 CSS 기능을 사용할 수 있지만 아직 가져오지 않았기 때문에 JS를 사용할 수 없습니다!

    JS 가져오기는 CSS만큼 쉽지 않습니다. CSS와 같이 JS를 직접 가져오면 window와 document가 정의되지 않았다는 오류가 발생합니다. 윈도우와 문서는 클라이언트측 객체인 반면 Next.js는 클라이언트측과 서버측에서 HTML을 렌더링하기 때문입니다. 따라서 이러한 오류를 방지하기 위해 useEffect() 후크를 사용하여 JS를 동적으로 가져옵니다. 아래 코드를 보세요.

    useEffect(()=>{
        import("bootstrap/dist/js/bootstrap");
},[])

    _app.js 파일에 다음 코드를 추가합니다. 이제 페이지가 브라우저에 로드될 때만 JS를 가져옵니다.

    Use Effect hook only runs on Client side i.e in the Browser.



    이것은 Next.js 애플리케이션에 부트스트랩을 추가하는 것에 관한 것이었습니다.
    읽어 주셔서 감사합니다! 그런 콘텐츠가 마음에 드시면 저를 팔로우하세요. 웹 개발 및 프로그래밍에 대한 정기적인 콘텐츠를 게시합니다.
    Active Record를 사용하고 싶습니까?
    인라인 어셈블리 언어. 저게 뭐에요?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage