generateStaticParams

~18 min · SSG, dynamic routes, build time

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Build time 에 dynamic route 미리 render

generateStaticParams 가 App Router 의 getStaticPaths 등가물. Dynamic route 에서 export, pre-build 할 param list 반환, Next.js 가 build 시 각각 static HTML 생성.

Unknown param 의 default

본인 list 에 없는 path 는 on demand render + cache. export const dynamicParams = false 박으면 unknown slug 가 404.

Multi-level dynamic segment

Nested dynamic segment 위해 모든 segment 채우는 object 반환. Function 이 build 에 한 번 돌고; 모든 조합 enumerate 안 해도 됨 — 본인이 pre-build 원하는 거만.

Code

Blog post 미리 build·tsx

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const slugs = await getAllPostSlugs();
  return slugs.map((slug) => ({ slug }));
}

export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await fetchPost(slug);
  return <article dangerouslySetInnerHTML={{ __html: post.html }} />;
}

Unknown path 를 404 로 lock·tsx

export const dynamicParams = false; // generateStaticParams 안 slug 가 404

export async function generateStaticParams() {
  return [{ slug: 'hello' }, { slug: 'world' }];
}

Two-level dynamic·tsx

// app/[locale]/blog/[slug]/page.tsx
export async function generateStaticParams() {
  return [
    { locale: 'en', slug: 'hello' },
    { locale: 'ko', slug: 'hello' },
    { locale: 'en', slug: 'world' },
  ];
}

External links

generateStaticParams

Exercise

Blog 또는 docs route 에 generateStaticParams 추가. App build 하고 build output 확인: 몇 page pre-render 됐는지 세고 unknown slug 가 여전히 runtime 에 render 되는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousStreaming & Suspense Next →'use cache' Directive

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.