getStaticPaths

getStaticPaths는 Next.js에서 제공하는 함수로, 동적 라우트의 모든 가능한 경로를 사전에 생성하는 데 사용됩니다. 이 함수를 사용하면 빌드 시간에 각각의 동적 라우트에 대한 HTML을 미리 생성할 수 있습니다. 이를 통해 정적 사이트 생성(Static Site Generation, SSG)을 이용해 최적의 성능을 내면서 동시에 동적 라우트를 사용할 수 있습니다.

getStaticPaths는 getStaticProps와 함께 사용되며, 페이지의 모든 가능한 경로를 지정하고, 각 경로에 대한 데이터를 제공하는 데 사용됩니다.

다음은 getStaticPaths의 사용 예시입니다:

export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false }
}

위 코드에서 getStaticPaths 함수는 외부 API에서 모든 포스트를 가져온다. 그런 다음 각 포스트에 대한 경로를 생성하고, 이 경로들을 반환합니다. 이렇게 하면 Next.js는 반환된 모든 경로에 대해 HTML을 사전에 생성합니다.

fallback 옵션은 요청된 경로가 빌드 시에 생성되지 않았을 경우의 동작을 결정합니다. fallback: false는 생성되지 않은 경로에 대해 404 페이지를 보여주며, fallback: true는 생성되지 않은 경로에 대해 먼저 빈 페이지를 보여준 다음, 필요한 데이터를 가져와서 페이지를 완성합니다.

getStaticPaths는 정적 생성을 사용하는 동적 라우트에서 필수적입니다. 이를 통해 정적 사이트 생성의 이점을 누리면서 동적 라우트를 사용할 수 있습니다.