Hvordan fungerer dynamiske ruter og generateStaticParams?

Question

Accepted Answer

**Dynamiske ruter** bruker hakeparanteser i mappenavn for å samsvare variable URL-segmenter, og **`generateStaticParams`** forteller Next.js hvilke sider som skal forrendes på byggetidspunktet (for SSG/ISR). ## Dynamisk 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 — forrender spesifikke sider på forhånd ```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 } ``` Uten dette blir en dynamisk rute rendret på forespørsel (SSR). **Med** det forgenerer Next.js en statisk side for hver returnert parameter ved bygging — som gir deg hastigheten til SSG for et kjent sett med dynamiske sider (hvert blogginnlegg, hvert produkt). ## Håndtering av parametere som ikke er i listen ```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 ``` Dette lar deg forbygge dine topp/mest vanlige sider og fortsatt betjene (eller 404) den lange halen. ## Catch-all og nestede parametere ```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" }]; } ``` ## Hvorfor det er viktig Denne kombinasjonen bestemmer hvordan du statisk genererer store sett med dynamiske sider (blogger, e-handel-kataloger, dokumentasjon) for optimal ytelse og SEO, mens `dynamicParams` kontrollerer fallback-oppførselen for sider som ikke ble forbygget. Å forstå `generateStaticParams` (hvilke sider som skal forbygges) plus cache- og `revalidate`-alternativene er kjernefunksjonen for SSG/ISR av dynamisk innhold i App Router.