Wie funktionieren dynamische Routen und generateStaticParams?

Question

Accepted Answer

**Dynamische Routen** verwenden in Klammern gesetzte Ordnernamen, um variable URL-Segmente zu matchen, und **`generateStaticParams`** teilt Next.js mit, welche dieser Seiten zur Build-Zeit vorgerendert werden sollen (für SSG/ISR). ## Dynamischer 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 — spezifische Seiten vorrendern ```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 } ``` Ohne dies wird eine dynamische Route auf Anforderung (SSR) gerendert. **Mit** dieser Funktion pre-generiert Next.js bei jedem Build eine statische Seite für jeden zurückgegebenen Parameter — was dir die Geschwindigkeit von SSG für einen bekannten Satz dynamischer Seiten gibt (jeder Blogbeitrag, jedes Produkt). ## Umgang mit Parametern, die nicht in der Liste enthalten sind ```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 ``` Dies ermöglicht dir, deine Top- oder häufigsten Seiten vorab zu erstellen und dennoch die lange Tail zu bedienen (oder 404). ## Catch-all und verschachtelte Parameter ```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" }]; } ``` ## Warum es wichtig ist Dieses Paar ist der Weg, um große Mengen an dynamischen Seiten (Blogs, E-Commerce-Kataloge, Dokumentation) statisch zu generieren und damit höchste Performance und SEO zu erreichen, während `dynamicParams` das Fallback-Verhalten für Seiten steuert, die nicht im Voraus erstellt werden. Das Verständnis von `generateStaticParams` (welche Seiten im Voraus zu erstellen sind) plus die Caching-/`revalidate`-Optionen sind der Kern der SSG/ISR für dynamischen Inhalt im App Router.