شرائح المسار الديناميكية

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

الاصطلاح

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

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <div>My Post: {slug}</div>
}

export default async function Page({ params }) {
  const { slug } = await params
  return <div>My Post: {slug}</div>
}

يتم تمرير الشرائح الديناميكية كخاصية params إلى دوال layout، page، route، وgenerateMetadata.

شرائح الالتقاط الكامل

يمكن توسيع الشرائح الديناميكية لالتقاط جميع الشرائح اللاحقة عن طريق إضافة نقاط داخل الأقواس [...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 اعتمادًا على شريحة المسار المكونة.

السلوك

• بما أن خاصية params هي وعد (promise)، يجب عليك استخدام async/await أو دالة use من React للوصول إلى القيم.
  • في الإصدار 14 وما قبله، كانت params خاصية متزامنة. للمساعدة في التوافق مع الإصدارات السابقة، لا يزال بإمكانك الوصول إليها بشكل متزامن في Next.js 15، ولكن هذا السلوك سيتم إيقافه في المستقبل.

أمثلة

مع generateStaticParams

يمكن استخدام دالة 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,
  }))
}

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