Next.js Dynamic Routes

Page Path Depends on External Data

외부 데이터에 의존하는 페이지 경로
각 페이지 경로가 외부 데이터에 의존하는 경우에 대해 이야기하겠습니다. Next.js를 사용하면 외부 데이터에 의존하는 경로가 있는 페이지를 정적으로 생성할 수 있습니다. 이렇게 하면 Next.js에서 동적 URL이 활성화됩니다.

외부 데이터에 의존하는 경로가 있는 페이지를 미리 렌더링할 수 있습니다.
프로덕션용 앱 빌드 -> 외부데이터 가져 옴 -> 경로 형식이 있는 페이지를 생성합니다.

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

페이지에서 getStaticPaths라는 비동기 함수를 내보낼 것입니다. 이 함수에서는 id에 대해 가능한 값 목록을 반환해야 합니다.
마지막으로 getStaticProps를 다시 구현해야 합니다.

import Layout from '../../components/layout';

export default function Post() {
  return <Layout>...</Layout>;
}

export async function getStaticPaths() {
  // Return a list of possible value for id
  // Returns an array that looks like this:
  // return {
  //  [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  //  ],
  //   fallback: false,
  // };
}

export async function getStaticProps({ params }) {
  // params는 getStaticPaths의 return params:id 값
  // Fetch necessary data for the blog post using params.id
}

동적일 수 있는 /posts/ 라는 경로에 페이지를 정적으로 생성하려면...
페이지 파일에는 다음이 포함되어야 합니다:

1. 이 페이지에서 렌더되는 리액트 컴포넌트
2. id에 대해 가능한 값의 배열을 반환하는 getStaticPaths
3. id가 있는 게시물에 필요한 데이터를 가져오는 getStaticProps

Fetch External API or Query Database

getStaticProps와 마찬가지로 getStaticPaths는 모든 데이터 소스에서 데이터를 가져올 수 있습니다.

  export async function getAllPostIds() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..');
  const posts = await res.json();
  return posts.map((post) => {
    return {
      params: {
        id: post.id,
      },
    };
  });
}

Development vs. Production

• 개발 중(npm run dev 또는 yarn dev) getStaticPaths는 모든 요청에서 실행됩니다.
• 프로덕션 환경에서 getStaticPaths는 빌드 시 실행됩니다.

Fallback

getStaticPaths에서 fallback: false 의미
fallback이 false이면 getStaticPaths에서 반환되지 않은 모든 경로는 404 페이지가 됩니다.

fallback이 true이면 getStaticProps의 동작이 변경됩니다:

• getStaticPaths에서 반환된 경로는 빌드 시 HTML로 렌더링됩니다.
• 빌드 시 생성되지 않은 경로는 404 페이지를 생성하지 않습니다. 대신 Next.js는 그러한 경로에 대한 첫 번째 요청에서 페이지의 "대체" 버전을 제공합니다.
• 백그라운드에서 Next.js는 요청된 경로를 정적으로 생성합니다. 동일한 경로에 대한 후속 요청은 빌드 시 미리 렌더링된 다른 페이지와 마찬가지로 생성된 페이지를 제공합니다.

폴백이 차단되면 새 경로는 getStaticProps로 서버 측에서 렌더링되고 향후 요청을 위해 캐시되므로 경로당 한 번만 발생합니다.

Catch-all Routes

괄호 안에 세 개의 점(...)을 추가하여 모든 경로를 포착하도록 동적 경로를 확장할 수 있습니다. 예를 들어:

• pages/posts/[...id].js는 /posts/a와 일치하지만 /posts/a/b, /posts/a/b/c 등과도 일치합니다.

이렇게 하면 getStaticPaths에서 다음과 같이 id 키의 값으로 배열을 반환해야 합니다.

return [
  {
    params: {
      // Statically Generates /posts/a/b/c
      id: ['a', 'b', 'c'],
    },
  },
  //...
];

그리고 params.id는 getStaticProps의 배열이 됩니다.

export async function getStaticProps({ params }) {
  // params.id will be like ['a', 'b', 'c']
}

404 Pages

맞춤 404 페이지를 만들려면 pages/404.js를 만듭니다. 이 파일은 빌드 시 정적으로 생성됩니다.

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