Next.js 소개

패키지 설치

yarn add next react react-dom

package.json에 스크립트 명령을 추가합니다.

package.json

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

정적 생성 및 서버측 렌더링

Next.js는 페이지라는 개념을 중심으로 구성되어 있습니다. 페이지는 pages 디렉토리 아래의 js 파일에서 내보낸 react component입니다. pages 디렉토리 아래에 index.js를 만들고 yarn dev를 실행하고 localhost:3000에 브라우저로 액세스하면 index.js의 내용이 표시되는 것을 확인할 수 있습니다.

mkdir pages && cd pages && touch index.js

/pages/index.js

function HomePage(){
    return(
        <div>
            <h1>Welcome to Next.js</h1>
        </div>
    )
}
export default HomePage

Next.js에서 페이지는 react component이며 각 페이지는 파일 이름으로 라우팅됩니다.
예를 들어 다음 페이지에서 pages/about.js를 작성한 경우 localhost:3000/about에서 about.js의 내용이 표시됩니다.

/pages/about.js

function About(){
    return(
        <div>
            <h1>About</h1>
        </div>
    )
}
export default About

네비게이션 바 만들기

지금까지 만든 두 페이지 사이를 전환할 수 있도록 탐색을 만듭니다. components 디렉토리 아래에 Navbar.js를 만들고 react component를 작성합니다.
이때 클라이언트 측에서의 전환은 next/link에서 내보낸 Link 컴포넌트를 사용합니다.

/components/Navbar.js

import Link from "next/link";

const Navbar = () => {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About</a>
        </Link>
      </li>
    </ul>
  )
}

export default Navbar;

각 페이지에 탐색 막대를 표시하려면 페이지 디렉토리 아래의 각 파일에서 Navbar 구성 요소를 가져오고 그립니다.
※기술예는 HomePage만을 기재하고 있습니다.

/pages/index.js

import Navbar from '../components/Navbar'

function HomePage() {
  return (
    <>
      <Navbar />
      <div>
        <h1>Welcome to Next.js</h1>
      </div>
    </>
  )
}
export default HomePage

지금까지 Nextjs의 두 페이지를 전환하는 응용 프로그램이 완성되었습니다.

홈페이지( http://localhost:3000/ )


About 페이지( http://localhost:3000/about )