Dynamic routes र generateStaticParams कसरी काम गर्छन्?

Question

Accepted Answer

**Dynamic routes** ले bracketed folder names प्रयोग गरेर variable URL segments match गर्छन्, र **`generateStaticParams`** ले Next.js लाई बताउँछ कि build time मा कुन pages pre-render गर्न हो (SSG/ISR को लागि)। ## Dynamic segment ```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 — specific pages pre-render गर्नुहोस् ```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 on-demand (SSR) मा render हुन्छ। **यसको साथ**, Next.js build मा प्रत्येक returned param को लागि एक static page pre-generate गर्छ — तपाइँलाई SSG को गति दिँदै known set को dynamic pages को लागि (प्रत्येक blog post, प्रत्येक product)। ## Params list मा नभएका प्रबन्ध गर्नुहोस् ```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 ``` यो तपाइँलाई आफ्नो top/most-common pages pre-build गर्न र अझै पनि long tail serve (वा 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" }]; } ``` ## यो किन महत्त्वपूर्ण छ यो जोडी कसरी तपाइँ static रूपमा dynamic pages को ठूलो set generate गर्नुहुन्छ (blogs, e-commerce catalogs, docs) top performance र SEO को लागि, जबकि `dynamicParams` ले pages को fallback नियन्त्रण गर्छ जो अगाडि build गरिएको छैन। `generateStaticParams` (कुन pages pre-build गर्न) साथै caching/`revalidate` options बुझ्नु App Router मा dynamic content को लागि SSG/ISR गर्ने को मुल हो।