Next.js 튜토리얼 따라하기 - 3 (Dynamic Routes)

이 글은 Next.js 공식 튜토리얼을 참고하여 정리한 글입니다.

동적 경로 (Dynamic Routes)

동적 경로로 페이지를 정적 생성 하는 방법

각 게시물에 경로가 있어야함 ‘/posts/<id>’, 여기서 id 는 최상위 posts 디렉토리 아래에 있는 마크다운 파일의 이름이다

• pages/posts 폴더 내에 [id].js 라는 파일을 생성
• 대괄호로 묶인 파일 이름은 동적경로를 나타냄
• getStaticPaths 를 이용
  • 객체 배열이 들어옴 (params 내에 id 값이 있어야함)

  // Returns an array that looks like this:
    // [
    //   {
    //     params: {
    //       id: 'ssg-ssr'
    //     }
    //   },
    //   {
    //     params: {
    //       id: 'pre-rendering'
    //     }
    //   }
    // ]
  

• remark, remark-html, date-fns

fallback

getStaticPaths 에서 fallback 값을 false 로 반환하면 반환하지 않는 모든 경로는 404 페이지가 된다.

만약 값이 true 라면?

생성하지 않은 경로는 404 페이지를 생성하지 않는다. 대신 이런 경로에 대한 첫 요청에서 페이지의 대체버전을 제공한다.

(그 외 blocking 값도 있음) - 참고 : fallback 설명서

포괄 경로 (Catch-all Routes)

• pages/posts/[...id].js 는 /posts/a, /posts/a/b, /posts/a/b/c 에 다 포함된다.
• → 이 경우 getStaticPaths 에서 id 값을 배열로 반환해야함

라우터

Next.js 라우터에 접근하려면 ‘next/router’ 의 useRouter 훅을 가져와 접근할 수 있다

404페이지

• pages/404.js 파일을 생성하여 사용자 정의 404 페이지 를 생성할 수 있다
• 빌드시 정적으로 생성

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}