Come funzionano i route dinamici e generateStaticParams?

Question

Accepted Answer

**I route dinamici** utilizzano nomi di cartelle tra parentesi quadre per abbinare segmenti URL variabili, e **`generateStaticParams`** indica a Next.js quali di quelle pagine pre-renderizzare al momento della build (per SSG/ISR). ## Segmento dinamico ```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-renderizzare pagine specifiche ```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 } ``` Senza questo, un route dinamico viene renderizzato on-demand (SSR). **Con** questo, Next.js pre-genera una pagina statica per ogni parametro restituito al momento della build — dandoti la velocità di SSG per un insieme noto di pagine dinamiche (ogni articolo del blog, ogni prodotto). ## Gestire i parametri non nella lista ```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 ``` Questo ti permette di pre-costruire le tue pagine principali/più comuni e comunque servire (o restituire 404) la lunga coda. ## Catch-all e parametri annidati ```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" }]; } ``` ## Perché è importante Questa coppia è il modo in cui generi staticamente grandi insiemi di pagine dinamiche (blog, cataloghi e-commerce, documentazione) per prestazioni e SEO superiori, mentre `dynamicParams` controlla il fallback per le pagine non costruite in anticipo. Capire `generateStaticParams` (quali pagine pre-costruire) più le opzioni di caching/`revalidate` è il fulcro di fare SSG/ISR per contenuti dinamici nell'App Router.