كيف تعمل المسارات الديناميكية و 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` هو أساس عمل SSG/ISR للمحتوى الديناميكي في App Router.