ダイナミックルートと generateStaticParams はどのように機能しますか？

Question

Accepted Answer

**ダイナミックルート**は、括弧付きのフォルダ名を使用して可変のURLセグメントにマッチし、**`generateStaticParams`**は、Next.jsがビルド時にどのページをプリレンダリングするかを指示します（SSG/ISR用）。 ## ダイナミックセグメント ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default async function Post({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); // params.slug is the URL value return

{post.title}

; } ``` ## generateStaticParams — 特定のページをプリレンダリング ```tsx // Tell Next.js the list of slugs to build statically export async function generateStaticParams() { const posts = await getAllPosts(); return posts.map(post => ({ slug: post.slug })); // → builds /blog/post-1, /blog/post-2, ... as static HTML at build time } ``` これがない場合、ダイナミックルートはオンデマンドで（SSR）レンダリングされます。**これがある場合**、Next.jsはビルド時に返された各パラメータに対して静的ページを事前生成します。これにより、既知のダイナミックページセット（すべてのブログ記事、すべての商品）に対してSSGの速度を得ることができます。 ## リスト内にないパラメータの処理 ```tsx // what happens for a slug NOT returned by generateStaticParams? export const dynamicParams = true; // (default) render unknown slugs on-demand (ISR-like) // export const dynamicParams = false; // return 404 for any slug not pre-built ``` これにより、最初のページまたは最も一般的なページを事前構築し、それでも長いテール（ロングテール）を提供する（または404）ことができます。 ## キャッチオールおよびネストされたパラメータ ```text app/shop/[...categories]/page.tsx → /shop/a/b/c (params.categories = ['a','b','c']) app/[lang]/[slug]/page.tsx → multiple params: { lang, slug } ``` ```tsx export async function generateStaticParams() { return [{ lang: "en", slug: "about" }, { lang: "vi", slug: "about" }]; } ``` ## なぜ重要なのかこのペアは、ダイナミックページの大規模セット（ブログ、e-commerceカタログ、ドキュメント）を静的に生成するための方法であり、トップパフォーマンスとSEOを実現し、`dynamicParams`は事前に構築されていないページのフォールバックを制御します。 `generateStaticParams`（どのページを事前構築するか）とキャッシング/`revalidate`オプションを理解することは、App Routerでダイナミックコンテンツに対してSSG/ISRを実施するための核となります。