Next.js 앱에 부트스트랩 추가

22955 단어 reactbootstrapnextjavascript
부트스트랩에 익숙하다면 웹 애플리케이션의 프런트엔드를 개발하는 가장 빠르고 쉬운 방법 중 하나라는 데 동의할 수 있습니다. 스타일 지정 및 반응형 적응 시간을 절약할 수 있기 때문입니다.

이 기사에서는 부트스트랩을 사용하도록 Next JS 애플리케이션을 구성하는 방법을 살펴보겠습니다.

먼저 다음 js 애플리케이션을 설정하십시오.

yarn create next-app next-strap


다음으로 원하는 패키지를 설치합니다.

yarn add @zeit/next-css @zeit/next-less @zeit/next-sass next-images bootstrap react-bootstrap


이 패키지를 사용하면 다음 앱에 대한 이미지, css, less 및 sass 지원을 구성할 수 있지만 앱에서 부트스트랩을 사용하려면 bootstrap 및 react-bootstrap이 필요합니다.
react-bootstrap에 대한 자세한 내용을 보려면 React Bootstrap을 방문하십시오.

이제 자산 지원 패키지가 될 다음 구성 파일을 만들고 "next.config.js"라는 앱의 루트에 이 파일을 만듭니다.



아래 코드로 채우십시오.

const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const withLess = require('@zeit/next-less')
const withCSS = require('@zeit/next-css')

module.exports = withCSS(withLess(withImages(withSass({
  env: {
    ANY_ENV_KEY: "ANY_ENV_VARIABLE"
  }
}))));


구성 내에서 Next JS 앱에 포함하려는 환경 변수를 포함하는 env 객체를 추가했습니다.

이제 pages/_app.js 파일에 다음 가져오기를 추가합니다.

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


신규_app.js는 다음과 같아야 합니다.

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

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

pages/index 파일에서 헤드만 남기고 내용을 지웁니다.

import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>


    </div>
  )
}


이 페이지에 부트스트랩 구성 요소를 첨부하는 작업을 진행하겠습니다. React Bootstrap Carousel Component 으로 이동합니다.

첫 번째 샘플 코드를 pages/index 파일에 복사하고 react-bootstrap 에서 Carousel도 가져와서 코드를 만듭니다.

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Carousel } from 'react-bootstrap'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Carousel>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=First slide&bg=373940"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=Second slide&bg=282c34"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="holder.js/800x400?text=Third slide&bg=20232a"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </div>
  )
}


이제 회전 슬라이더에 대한 배경 이미지를 추가합니다. 자리 표시자를 사용하겠습니다. https://placehold.it/800x400?text=800x400 내 배경에는 원하는 것을 자유롭게 사용하십시오.

내 최종 코드는 다음과 같습니다.

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Carousel } from 'react-bootstrap'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Carousel>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://placehold.it/800x400?text=800x400"
            alt="First slide"
          />
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://placehold.it/800x400?text=800x400"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://placehold.it/800x400?text=800x400"
            alt="Third slide"
          />

          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    </div>
  )
}


이제 터미널에 yarn run dev를 입력하여 앱을 실행할 수 있습니다. 앱 홈페이지에 다음 동작이 표시되어야 합니다.



이 문서가 도움이 된다면 또는 Full Stack Next JS Course on Udemy에서 다른 Next JS 비디오를 확인할 수도 있습니다.
Swing에서 Jetpack Compose 데스크탑까지 #1
ajax_option.html

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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