Dynamic routes और generateStaticParams कैसे काम करते हैं?

Question

Accepted Answer

**Dynamic routes** ब्रैकेट किए गए फोल्डर नामों का उपयोग करते हैं परिवर्तनीय URL सेगमेंट से मेल खाने के लिए, और **`generateStaticParams`** Next.js को बताता है कि बिल्ड समय पर कौन से पेज पूर्व-रेंडर करें (SSG/ISR के लिए)। ## 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 — विशिष्ट पेजों को पूर्व-रेंडर करें ```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 } ``` इसके बिना, एक dynamic route मांग पर रेंडर किया जाता है (SSR)। **इसके साथ**, Next.js बिल्ड में प्रत्येक लौटाए गए param के लिए एक स्थिर पेज पूर्व-जनरेट करता है — आपको dynamic पेजों के एक ज्ञात सेट के लिए SSG की गति देता है (हर ब्लॉग पोस्ट, हर उत्पाद)। ## Params को संभालना जो सूची में नहीं हैं ```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 ``` यह आपको अपने शीर्ष/सबसे सामान्य पेजों को पूर्व-निर्मित करने और फिर भी लंबी पूंछ की सेवा (या 404) देने देता है। ## Catch-all और nested params ```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" }]; } ``` ## यह क्यों महत्वपूर्ण है यह जोड़ी यह है कि आप dynamic पेजों के बड़े सेट को (ब्लॉग, ई-कॉमर्स कैटलॉग, दस्तावेज) शीर्ष प्रदर्शन और SEO के लिए स्थिर रूप से जनरेट करते हैं, जबकि `dynamicParams` समय से पहले निर्मित न किए गए पेजों के लिए fallback को नियंत्रित करता है। `generateStaticParams` (कौन से पेजों को पूर्व-निर्माण करना है) को समझना साथ ही caching/`revalidate` विकल्पों के साथ App Router में dynamic सामग्री के लिए SSG/ISR करने का मूल है।