Kako funkcioniraju dinamičke rute i generateStaticParams?

Question

Accepted Answer

**Dinamičke rute** koriste imena mapa u zagradama da bi se poklapale sa varijabilnim URL segmentima, a **`generateStaticParams`** govori Next.js-u koje stranice unaprijed ispisati u vrijeme izgradnje (za SSG/ISR). ## Dinamički 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 — unaprijed ispis određenih stranica ```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 toga, dinamička ruta se ispisuje na zahtjev (SSR). **Uz** to, Next.js unaprijed generiše statičku stranicu za svaki vraćeni parametar tokom izgradnje — dajući vam brzinu SSG-a za poznati skup dinamičkih stranica (svaki blog post, svaki proizvod). ## Rukovanje parametrima koji nisu na listi ```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 ``` Ovo vam omogućava da unaprijed napravite vaše gornje/najčešće korištene stranice i dalje poslužite (ili vratite 404) dugi rep. ## Catch-all i ugniježđeni parametri ```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" }]; } ``` ## Zašto je važno Ovaj par je način na koji statički generirate velike skupove dinamičkih stranica (blogove, e-commerce kataloge, dokumentaciju) za vrhunske performanse i SEO, dok `dynamicParams` kontrolira povrat za stranice koje nisu izgrađene unaprijed. Razumijevanje `generateStaticParams` (koje stranice unaprijed izgraditi) plus opcije cache-a/`revalidate` je srž SSG/ISR-a za dinamički sadržaj u App Routeru.