Hur fungerar dynamiska rutter och generateStaticParams?

Question

Accepted Answer

**Dynamiska rutter** använder hakparenteser i mappnamn för att matcha variabla URL-segment, och **`generateStaticParams`** säger till Next.js vilka av dessa sidor som ska förrenderas vid byggning (för SSG/ISR). ## Dynamiskt 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 — förrendera specifika sidor ```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 } ``` Utan detta renderas en dynamisk rutt on-demand (SSR). **Med** det förrenderar Next.js en statisk sida för varje returnerad parameter vid byggning — vilket ger dig SSG-hastigheten för en känd uppsättning dynamiska sidor (varje blogginlägg, varje produkt). ## Hantering av parametrar inte i listan ```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 ``` Detta låter dig förbygga dina största/mest vanliga sidor och fortfarande servera (eller 404) långslänten. ## Catch-all och kapslade parametrar ```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" }]; } ``` ## Varför det är viktigt Detta par är hur du statiskt genererar stora uppsättningar av dynamiska sidor (bloggar, e-handelskataloger, dokumentation) för högsta prestanda och SEO, medan `dynamicParams` kontrollerar fallback för sidor som inte byggdes i förväg. Att förstå `generateStaticParams` (vilka sidor att förbygga) tillsammans med cachning/`revalidate`-alternativ är kärnan i att göra SSG/ISR för dynamiskt innehål i App Router.