NextJS 기본적인 사용 방법 정리

설치 방법

npx create-next-app

yarn create next-app

TypeScript 연동

프로젝트 루트에서 tsconfig.json 파일을 생성하면 NextJS가 자동적으로 디폴트 값을 설정해줌

touch tsconfig.json

TypeScript 설치

npm install --save-dev typescript @types/react @types/node

설치 이후에는 npm run dev 로 한 번 실행해야 tsconfig.json 에 옵션이 설정됨

pages 폴더 관련 규칙

폴더 밑에 js 파일을 만들고 export default 를 지정하면 해당 파일명을 URL로 사용하는 페이지 생성 가능
function 의 이름은 무엇이든 상관 없음
다만 파일명이 index.js 라면 홈 화면을 표시하게 되며, /index URL을 따로 만들 수는 없음
디렉토리 하위에 [변수].js 파일을 만들어서 URL에 변수를 넣어줄 수 있음 (Dynamic Routes)
- [...params].js 파일을 사용해서 여러 개의 파라미터를 처리할 수도 있음
ex) pages > movies > all → /movies/all
- 만약 위 상태에서 /movies 페이지도 만들고 싶다면 moives 하위에 index.js 를 생성하면 됨

_app.js 와 _document.js

_app.js

NextJS가 모든 페이지를 렌더링할 수 있게 해주는 컴포넌트의 청사진
페이지 전환 시에도 레이아웃과 상태값을 유지할 수 있도록 해줌
global.css 파일은 이 _app.js 에서만 사용 가능

※ _app.js 기본 형태

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} >;
}

_document.js

NextJS 는 마크업 페이지를 건너뛰기 때문에 html, head, body 등의 태그를 수정해야 한다면 필요한 파일
서버에서 한번만 실행되며, HTML의 기본 폼을 잡아주는 역할

※ _document.js 사용 예시

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

export default function Document() {
  return (
    <Html lang="ko">
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

정리

_app은 global css 및 전체 레이아웃을 잡아주는 용도
_document는 서버에서만 렌더링되는 기본 폼

Pre-Rendering 에 대해서

NextJS 는 모든 페이지를 사전 렌더링
그렇기 때문에 SEO에 최적화되어 있으며, 유저는 JS가 로딩되기 전에 페이지를 볼 수 있음
정적 생성, 혹은 SSR을 활용한 Dynamic Rendering으로, 2가지 형태로 지원

Data Fetching

공식 문서 링크

getServerSideProps

브라우저가 아닌 서버에서만 동작하는 페이지 생성
로딩을 따로따로 기다리지 않고, 페이지 내 데이터를 한번에 로드하고 싶을 때 사용
대신 유저가 잠시 아무 것도 보이지 않는 화면을 보게 됨

※ 기본 형태

export async function getServerSideProps(context) {
  return {
    props: {}
  }
}

getStaticProps

정적인 페이지를 만들 수 있게 해주는 기능
데이터가 없는 페이지에서 사용
API나, React의 state가 없어야만 함
이 함수는 서버를 실행할 때 단 한번만 실행됨
기본 형태는 getServerSideProps 와 함수명 빼고는 다 같음

getStaticPaths

getStaticProps 는 얼마나 많은 정적 페이지가 있을지를 미리 알기 위해 getStaticPaths 를 필요로 함
return 할 때 [slug].tsx 와 같이, 지정한 변수에 맞는 객체를 params 객체에 설정해서 보내줘야 함
속성으로 paths: [] 와 fallback: boolean 값을 필요로 함
fallback 속성은 요청한 페이지가 아직 빌드되어 있지 않을 때에 대한 처리 (최초 접속의 경우)
- blocking : 페이지가 generated 될 때까지 유저를 기다리게 함 (SSR)
- false : 유저가 404 페이지를 보게 됨 / 최초 빌드 이후 새 페이지를 build 폴더에 넣지 않음
- true : 페이지를 generating하게 되는데, blocking과 다른 점은 미리 빌드된 다른 페이지를 보일 수 있음

※ 기본 형태

export async function getStaticPaths() {
  return {
    paths: [
      { params: {...} }
    ],
    fallback: 'blocking'
  };
}

Error page

404.js 혹은 500.js 같은 방식으로 생성해서 에러 페이지 디자인 가능
_error.js 파일을 생성해서 에러 코드에 맞게 커스터마이징할 수 있음
404 에러 또한 _error.js 에서 다룰 수 있지만, 그래도 정적인 페이지로 제공하는 방식이 권장됨

※ 사용 예시

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occured on server`
        : `An error occured on client`
      }
    </p>
  )
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

※ 본문은 노마드코더의 NextJS 시작하기, 캐럿마켓 클론코딩 강의와,

코딩앙마의 Next js 강좌, 그리고 Next.js Docs를 참고하여 작성했습니다.

저작자표시