المسارات الديناميكية

عندما لا تعرف أسماء المقاطع مسبقًا وتريد إنشاء مسارات من بيانات ديناميكية، يمكنك استخدام المقاطع الديناميكية التي يتم تعبئتها وقت الطلب أو تجهيزها مسبقًا وقت البناء.

الاصطلاح

يمكن إنشاء مقطع ديناميكي عن طريق لف اسم المجلد بين أقواس مربعة: [folderName]. على سبيل المثال، [id] أو [slug].

يتم تمرير المقاطع الديناميكية كخاصية params إلى دوال layout، وpage، وroute، وgenerateMetadata.

مثال

على سبيل المثال، يمكن أن يتضمن المدخل المسار التالي app/blog/[slug]/page.js حيث [slug] هو المقطع الديناميكي لمقالات المدونة.

export default function Page({ params }: { params: { slug: string } }) {
  return <div>My Post: {params.slug}</div>
}

export default function Page({ params }) {
  return <div>My Post: {params.slug}</div>
}

راجع صفحة generateStaticParams() لمعرفة كيفية إنشاء معلمات المقطع.

ملاحظة جيدة: المقاطع الديناميكية تعادل المسارات الديناميكية في دليل pages.

إنشاء معلمات ثابتة

يمكن استخدام دالة generateStaticParams بالاشتراك مع مقاطع المسار الديناميكية لإنشاء مسارات ثابتة وقت البناء بدلاً من الطلب عند الطلب.

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

الفائدة الأساسية من دالة generateStaticParams هي استرجاعها الذكي للبيانات. إذا تم جلب المحتوى داخل دالة generateStaticParams باستخدام طلب fetch، فإن الطلبات يتم تخزينها مؤقتًا تلقائيًا. هذا يعني أن طلب fetch بنفس الوسائط عبر عدة generateStaticParams، وتخطيطات، وصفحات سيتم تنفيذه مرة واحدة فقط، مما يقلل أوقات البناء.

استخدم دليل الترحيل إذا كنت تقوم بالترحيل من دليل pages.

راجع توثيق دالة الخادم generateStaticParams لمزيد من المعلومات وحالات الاستخدام المتقدمة.

مقاطع التقاط الكل

يمكن توسيع المقاطع الديناميكية لالتقاط جميع المقاطع اللاحقة عن طريق إضافة نقاط حذف داخل الأقواس [...folderName].

على سبيل المثال، app/shop/[...slug]/page.js ستطابق /shop/clothes، وأيضًا /shop/clothes/tops، و/shop/clothes/tops/t-shirts، وهكذا.

مقاطع التقاط الكل الاختيارية

يمكن جعل مقاطع التقاط الكل اختيارية عن طريق تضمين المعلمة في أقواس مربعة مزدوجة: [[...folderName]].

على سبيل المثال، app/shop/[[...slug]]/page.js ستطابق أيضًا /shop، بالإضافة إلى /shop/clothes، و/shop/clothes/tops، و/shop/clothes/tops/t-shirts.

الفرق بين مقاطع التقاط الكل والتقاط الكل الاختيارية هو أن الاختيارية تطابق المسار بدون المعلمة أيضًا (/shop في المثال أعلاه).

TypeScript

عند استخدام TypeScript، يمكنك إضافة أنواع لـ params بناءً على مقطع المسار المُهيأ.

export default function Page({ params }: { params: { slug: string } }) {
  return <h1>My Page</h1>
}

export default function Page({ params }) {
  return <h1>My Page</h1>
}

ملاحظة جيدة: قد يتم ذلك تلقائيًا بواسطة ملحق TypeScript في المستقبل.