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

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

الاصطلاح

يمكن إنشاء جزء ديناميكي عن طريق وضع اسم المجلد بين أقواس مربعة: [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 في المستقبل.