Menene yadda dynamic routes da generateStaticParams suke aiki?

Question

Accepted Answer

**Dynamic routes** suna amfani da sunayen folda da aka daure da brackets domin daidaita sassan URL masu sauya-sauya, kuma **`generateStaticParams`** yana gaya wa Next.js wanne shafuka za su karattu a lokacin gida (don SSG/ISR). ## Tsaren dynamic ```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 — karattu shafuka na musamman ```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 } ``` Ba tare da wannan, ana karattu jerin dynamic a buɗe (SSR). **Tare da shi**, Next.js yana karattu shafi static don kowane ma'aunin da aka dawo a lokacin gida — yana ba ka jujjuyawar SSG don saitin sannu-sannu na shafuka masu sauya (kowane rubutu blog, kowane albashin). ## Magganin ma'auni da ba a cikin jerin ba ```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 ``` Wannan yana ba ka damar gina shafuka na gida/mafi yawwa kafin lokaci kuma tun yanzu kashe (ko 404) babbar cikin jiya. ## Catch-all da ma'auni na cikin gida ```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" }]; } ``` ## Me yasa ya bambanta Wannan nau'i shine yadda kuke karattu manyan jerin shafuka masu sauya (blogs, catalogs na e-commerce, docs) a tsaye don saurin gida da SEO, yayin da `dynamicParams` yana sarrafa kusada don shafuka da ba a gina kafin lokaci. Tuntunta kan `generateStaticParams` (wanne shafuka za su karattu kafin lokaci) da zaɓuɓɓukan caji/`revalidate` shine nauyin gudummawa na yin SSG/ISR don abun sauya a App Router.