Jak fungují dynamické trasy a generateStaticParams?

Question

Accepted Answer

**Dynamické trasy** používají názvy složek v závorkách k porovnávání proměnných segmentů URL a **`generateStaticParams`** říká Next.js, které z těchto stránek má předvytvořit v čase buildu (pro SSG/ISR). ## Dynamický 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 — předvytvořit konkrétní stránky ```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 } ``` Bez toho se dynamická trasa vykresluje na vyžádání (SSR). **S tím** Next.js předgeneruje statickou stránku pro každý vrácený parametr při buildu — což vám dává rychlost SSG pro známou sadu dynamických stránek (každý příspěvek blogu, každý produkt). ## Zpracování parametrů, které nejsou v seznamu ```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 ``` To vám umožňuje předem vytvořit vaše nejčastější stránky a stále obsluhovat (nebo 404) zbývající část. ## Catch-all a vnořené parametry ```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" }]; } ``` ## Proč je to důležité Tento pár je způsob, jak staticky generovat velké sady dynamických stránek (blogy, e-commerce katalogy, dokumentace) pro maximální výkon a SEO, zatímco `dynamicParams` řídí fallback pro stránky nevytvořené předem. Pochopení `generateStaticParams` (které stránky předem vytvořit) plus možnosti cachování/`revalidate` je jádrem SSG/ISR pro dynamický obsah v App Routeru.