डायनामिक रूट्स आणि generateStaticParams कसे काम करतात?

Question

Accepted Answer

**डायनामिक रूट्स** व्हेरिएबल URL सेगमेंट्सशी जुळण्यासाठी ब्रॅकेटेड फोल्डर नावांचा वापर करतात, आणि **`generateStaticParams`** Next.js ला सांगतात की बिल्ड टाइमच्या दरम्यान कोणते पेज प्री-रेंडर करायचे आहेत (SSG/ISR साठी). ## डायनामिक सेगमेंट ```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 } ``` याशिवाय, डायनामिक रूट ऑन-डिमांडवर रेंडर केला जातो (SSR). **याच्या सह**, Next.js बिल्डच्या वेळी प्रत्येक रिटर्न केलेल्या पॅरामसाठी एक स्टॅटिक पेज प्री-जेनरेट करतो — ज्ञात डायनामिक पेजच्या सेटसाठी तुम्हाला SSG ची गती देते (प्रत्येक ब्लॉग पोस्ट, प्रत्येक प्रोडक्ट). ## लिस्टमध्ये नसलेल्या पॅरम्सवर हँडलिंग करणे ```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) सर्व्ह करण्यास देते. ## कैच-ऑल आणि नेस्टेड पॅरम्स ```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" }]; } ``` ## हे महत्वाचे का आहे यह जोडी हे आहे की तुम्ही डायनामिक पेजचे मोठे सेट (ब्लॉग्स, ई-कॉमर्स कॅटलॉग, डॉक्स) स्टॅटिकली जेनरेट करता टॉप परफॉर्मन्स आणि SEO साठी, जेव्हा `dynamicParams` समोरून बिल्ड न केलेल्या पेजसाठी फॉलबॅक नियंत्रित करते. `generateStaticParams` (कोणते पेज प्री-बिल्ड करायचे) तसेच कॅशिंग/`revalidate` ऑप्शन्स समजून घेणे ही App Router मध्ये डायनामिक कंटेंटसाठी SSG/ISR करण्याचा कोर आहे.