Kaip veikia dinaminiai marsrutai ir generateStaticParams?

Question

Accepted Answer

**Dinaminiai marsrutai** naudoja skliaustuose esančius aplankų pavadinimus, kad atitiktų kintamuosius URL segmentus, o **`generateStaticParams`** nurodo Next.js, kuriuos iš tų puslapių iš anksto renderinti kompiliavimo metu (SSG/ISR). ## Dinaminis segmentas ```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 — iš anksto render'inti konkrečius puslapius ```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 } ``` Be to, dinaminis maršrutas yra renderuojamas pagal poreikį (SSR). **Su juo** Next.js iš anksto sugeneruoja statinį puslapį kiekvienam grąžintam parametrui kompiliavimo metu — suteikiant jums SSG greitį žinomai dinaminio puslapio aibei (kiekvienas tinklaraščio straipsnis, kiekvienas produktas). ## Parametrų tvarkymas, kurie nėra sąraše ```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 ``` Tai leidžia iš anksto sukurti jūsų pagrindinius/dažniausiai naudojamus puslapius ir vis tiek patiekti (arba 404) likutį. ## Catch-all ir įdėti parametrai ```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" }]; } ``` ## Kodėl tai svarbu Ši pora yra tai, kaip jūs statiškai generuojate didelius dinaminio puslapio rinkinius (tinklaraščius, e-komercijos katalogus, dokumentus) dėl aukšto našumo ir SEO, o `dynamicParams` kontroliuoja atsarginę parinktį puslapiams, kurie iš anksto nebuvo sukurti. Supratimas apie `generateStaticParams` (kuriuos puslapius iš anksto sukurti) bei talpinimo/`revalidate` parinktys yra SSG/ISR branduolys dinaminio turinio App Router.