Как работают динамические маршруты и 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) длинный хвост. ## 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` — это основа SSG/ISR для динамического контента в App Router.