Njia za dynamic routes na generateStaticParams zinavyofanya kazi?

Question

Accepted Answer

**Njia za dynamic** hutumia majina ya folda yenye mabano ili kulingana na sehemu za URL zinazobadilika, na **`generateStaticParams`** inaeleza Next.js ni kurasa gani kati ya hizi zinazohitaji kuwa zimeregeziwa mapema wakati wa ujenzi (kwa SSG/ISR). ## Sehemu inayobadilika ```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 — rejeza kurasa maalum mapema ```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 } ``` Bila hii, njia inayobadilika hurejezwa on-demand (SSR). **Ikiwako**, Next.js huzalisha kurasa statiki kwa kila parameter iliyorudishwa wakati wa ujenzi — kuupa kasi ya SSG kwa seti inayojulikana ya kurasa inayobadilika (kila chachu la blog, kila bidhaa). ## Kushughulikia vigezo ambavyo si kwenye orodha ```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 ``` Hii inakuruhusu kujenga mapema kurasa zako kubwa/zinazotumiwa sana na bado kuhuisha (au 404) mkumbu mrefu. ## Catch-all na vigezo vya kiota ```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" }]; } ``` ## Kwa nini ni muhimu Jozi hii ni jinsi unavyozalisha kwa statiki seti kubwa za kurasa inayobadilika (blogi, katalogi za biashara ya elektroniki, nyaraka) kwa utendaji na SEO wa juu, wakati `dynamicParams` inadhibiti fallback kwa kurasa ambazo hazikujenezwa mapema. Kuelewa `generateStaticParams` (kurasa gani kujenga mapema) pamoja na chaguzi za caching/`revalidate` ni msingi wa kufanya SSG/ISR kwa maudhui yanayobadilika katika App Router.