Hoe werken dynamic routes en generateStaticParams?

Question

Accepted Answer

**Dynamic routes** gebruiken vierkante haken in mappings om variabele URL-segmenten te matchen, en **`generateStaticParams`** vertelt Next.js welke pagina's op build time vooraf moeten worden gegenereerd (voor SSG/ISR). ## Waarom het belangrijk is ```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 — specifieke pagina's vooraf genereren ```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 } ``` Zonder dit wordt een dynamic route op aanvraag weergegeven (SSR). **Ermee** genereert Next.js op build time een statische pagina voor elke geretourneerde parameter — wat u de snelheid van SSG geeft voor een bekende set dynamic pagina's (elk blogbericht, elk product). ## Omgaan met parameters niet in de lijst ```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 ``` Hiermee kunt u uw top/meest gebruikte pagina's vooraf genereren en de lange staart nog steeds serveren (of 404). ## Catch-all en geneste parameters ```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" }]; } ``` ## Waarom het belangrijk is Deze combinatie bepaalt hoe u grote sets dynamic pagina's (blogs, e-commerce catalogi, documentatie) statisch genereert voor optimale prestaties en SEO, terwijl `dynamicParams` het fallback-gedrag bepaalt voor pagina's die niet vooraf zijn gegenereerd. Het begrijpen van `generateStaticParams` (welke pagina's vooraf genereren) plus de cache- en `revalidate`-opties is essentieel voor SSG/ISR van dynamic content in de App Router.