generateStaticParams

generateStaticParams

generateStaticParams 함수는 동적 경로 세그먼트와 함께 사용하며, 요청 시점이 아닌 빌드 시점에 정적으로 경로를 미리 생성하는 데 활용한다.

generateStaticParams는 다음 파일과 함께 사용할 수 있다:

• 페이지 (page.tsx / page.js)
• 레이아웃 (layout.tsx / layout.js)
• 라우트 핸들러 (route.ts / route.js)

// [slug] 동적 세그먼트를 채울 params 목록을 반환한다.
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

// generateStaticParams가 반환한 params를 기반으로
// 여러 버전의 페이지가 정적으로 사전 생성된다.
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  // ...
}

참고 사항

• dynamicParams 세그먼트 설정 옵션을 통해 generateStaticParams에서 생성되지 않은 동적 세그먼트에 접근했을 때의 동작을 제어할 수 있다.
• 런타임에 경로를 재검증(ISR)하려면 generateStaticParams에서 빈 배열을 반환하거나 export const dynamic = 'force-static'을 활용한다.
• next dev 실행 중에는 해당 경로로 이동할 때 generateStaticParams가 호출된다.
• next build 실행 중에는 레이아웃이나 페이지가 생성되기 전에 generateStaticParams가 먼저 실행된다.
• 재검증(ISR) 중에는 generateStaticParams가 다시 호출되지 않는다.
• generateStaticParams는 Pages Router의 getStaticPaths를 대체하는 함수다.

#nextjs/generateStaticParams