Kuinka dynaamiset reitit ja generateStaticParams toimivat?

Question

Accepted Answer

**Dynaamiset reitit** käyttävät hakasulkeissa olevia kansion nimiä muuttuvien URL-segmenttien vastaamiseen, ja **`generateStaticParams`** kertoo Next.js:lle, mitkä näistä sivuista on esigeneroimattava rakentamisen yhteydessä (SSG/ISR:lle). ## Dynaaminen segmentti ```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 — esigeneroi tietyt sivut ```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 } ``` Ilman tätä dynaaminen reitti esigeneroituu pyynnöstä (SSR). **Tämän** avulla Next.js esigeneroi staattisen sivun jokaiselle palautetulle parametrille rakentamisen yhteydessä — antaen sinulle SSG:n nopeuden tunnetulle joukolle dynaamisia sivuja (jokainen blogikirjoitus, jokainen tuote). ## Parametrien käsittely, jotka eivät ole luettelossa ```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 ``` Tämä antaa sinulle mahdollisuuden esigeneroida pääsivusi/yleisimmät sivut ja silti palvella (tai 404) pitkää häntää. ## Catch-all ja sisäkkäiset parametrit ```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" }]; } ``` ## Miksi se on tärkeää Tämä pari on se, miten staattisesti generoit suuria joukkoja dynaamisia sivuja (blogit, verkkokaupan katalogit, dokumentit) parhaalle suorituskyvylle ja SEO:lle, kun taas `dynamicParams` hallitsee takaisinmenettelyä sivuille, joita ei ole rakennettu etukäteen. `generateStaticParams`in ymmärtäminen (mitkä sivut esigeneroida) sekä välimuistin/`revalidate`-vaihtoehdot ovat keskeistä SSG/ISR:n tekemiselle dynaamiselle sisällölle App Routerissa.