Kako delujejo dinamične poti in generateStaticParams?

Question

Accepted Answer

**Dinamične poti** uporabljajo oklepaje v imenih map za ujemanje spremenljivih URL segmentov, **`generateStaticParams`** pa Next.js-u pove, katere od teh strani je treba predhodno renderirati ob času gradnje (za SSG/ISR). ## Dinamični 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 — predhodno renderiranje specifičnih strani ```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 } ``` Brez tega je dinamična pot renderirana na zahtevo (SSR). **Z** njim Next.js predhodno ustvari statično stran za vsak vrnjeni parameter ob gradnji — kar vam daje hitrost SSG za znani niz dinamičnih strani (vsak blog prispevek, vsak proizvod). ## Obravnavanje parametrov, ki niso na 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 vam omogoča predhodno izgradnjo vaših največjih/najpogostejših strani in še vedno serviranje (ali 404) za dolgi rep. ## Catch-all in ugnezdeni 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" }]; } ``` ## Zakaj je to pomembno To je par, s katerim statično generirate velike nize dinamičnih strani (blogi, e-trgovine, dokumentacija) za vrhunsko zmogljivost in SEO, medtem ko `dynamicParams` nadzira fallback za strani, ki niso bile vnaprej zgrajene. Razumevanje `generateStaticParams` (katere strani predhodno zgraditi) skupaj z možnostmi cachiranja/`revalidate` je osrednje za SSG/ISR dinamične vsebine v App Router-ju.