웹공부

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

syom 2022. 4. 16. 00:22

이 글은 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
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}