Cum funcționează rutele dinamice și generateStaticParams?

Question

Accepted Answer

**Rutele dinamice** utilizează nume de foldere în paranteze pătrate pentru a potrivi segmente de URL variabile, iar **`generateStaticParams`** spune Next.js care pagini să fie pre-randate la momentul compilării (pentru SSG/ISR). ## Segment dinamic ```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 — pre-randarea paginilor specifice ```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 } ``` Fără aceasta, o rută dinamică este randată la cerere (SSR). **Cu aceasta**, Next.js pre-generează o pagină statică pentru fiecare parametru returnat în compilare — oferindu-ți viteza SSG pentru un set cunoscut de pagini dinamice (fiecare articol de blog, fiecare produs). ## Tratarea parametrilor care nu sunt în listă ```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 ``` Aceasta vă permite să pre-compilați paginile dvs. principale/cele mai comune și să continuați să serviți (sau să returnați 404) coada lungă. ## Catch-all și parametri imbricați ```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" }]; } ``` ## De ce este important Această pereche determină modul în care generați static seturi mari de pagini dinamice (bloguri, cataloage de comerț electronic, documentație) pentru performanță maximă și SEO, în timp ce `dynamicParams` controlează comportamentul de rezervă pentru paginile care nu au fost compilate în prealabil. Înțelegerea `generateStaticParams` (ce pagini să pre-compilezi) plus opțiunile de cache/`revalidate` este esența SSG/ISR pentru conținut dinamic în App Router.