Dynamic routes এবং generateStaticParams কীভাবে কাজ করে?

Question

Accepted Answer

**Dynamic routes** ব্র্যাকেটেড ফোল্ডার নাম ব্যবহার করে পরিবর্তনশীল URL সেগমেন্ট ম্যাচ করে, এবং **`generateStaticParams`** Next.js কে বলে যে এই পৃষ্ঠাগুলির মধ্যে কোনগুলি বিল্ড সময়ে প্রি-রেন্ডার করতে হবে (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 — নির্দিষ্ট পৃষ্ঠা প্রি-রেন্ডার করুন ```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 বিল্ডে প্রতিটি রিটার্ন করা প্যারামের জন্য একটি স্ট্যাটিক পৃষ্ঠা প্রি-জেনারেট করে — আপনাকে পরিচিত ডাইনামিক পৃষ্ঠার একটি সেটের জন্য 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) করতে দেয়। ## Catch-all এবং নেস্টেড প্যারাম ```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 এ dynamic কন্টেন্টের জন্য SSG/ISR করার মূল।