动态路由和 generateStaticParams 是如何工作的?

Question

Accepted Answer

**动态路由**使用带括号的文件夹名称来匹配可变的 URL 段，**`generateStaticParams`** 告诉 Next.js 在构建时预渲染其中哪些页面（用于 SSG/ISR）。 ## Dynamic segment ```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）。 ## Catch-all 和嵌套参数 ```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" }]; } ``` ## 为什么这很重要这对功能是如何为大量动态页面（博客、电子商务目录、文档）静态生成页面以实现最佳性能和 SEO，而 `dynamicParams` 控制未提前构建的页面的回退行为。理解 `generateStaticParams`（预构建哪些页面）以及缓存/`revalidate` 选项是在 App Router 中对动态内容进行 SSG/ISR 的核心。