Dynamic routes اور generateStaticParams کیسے کام کرتے ہیں؟

Question

Accepted Answer

**Dynamic routes** قوسین میں رکھے ہوئے folder کے نام استعمال کرتے ہوئے variable URL segments سے match کرتے ہیں، اور **`generateStaticParams`** Next.js کو بتاتا ہے کہ build time پر ان صفحات میں سے کون سے 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 — مخصوص صفحات کو 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) کے طور پر rendered ہوتا ہے۔ **اس کے ساتھ**، Next.js build میں ہر returned param کے لیے ایک static page pre-generate کرتا ہے — آپ کو known dynamic pages (ہر blog post، ہر product) کے لیے SSG کی رفتار دیتا ہے۔ ## ان params کو handle کریں جو 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/سب سے عام صفحات کو پہلے سے 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" }]; } ``` ## یہ کیوں اہم ہے یہ pair بڑے dynamic pages (blogs، e-commerce catalogs، docs) کے static pages generate کرنے کا طریقہ ہے بہترین performance اور SEO کے لیے، جبکہ `dynamicParams` ان صفحات کے لیے fallback کو کنٹرول کرتا ہے جو پہلے سے build نہیں ہوئے ہیں۔ `generateStaticParams` کو سمجھنا (کون سے صفحات pre-build کریں) اور caching/`revalidate` options ہے App Router میں dynamic content کے لیے SSG/ISR کرنے کا بنیادی مسئلہ۔