default.js

يُستخدم ملف default.js لعرض بديل احتياطي داخل المسارات المتوازية (Parallel Routes) عندما لا يتمكن Next.js من استعادة الحالة النشطة للفتحة (slot) بعد تحميل الصفحة بالكامل.

أثناء التنقل الناعم (soft navigation)، يحتفظ Next.js بتتبع الحالة النشطة (الصفحة الفرعية) لكل فتحة. ومع ذلك، بالنسبة للتنقلات الصلبة (تحميل الصفحة بالكامل)، لا يمكن لـ Next.js استعادة الحالة النشطة. في هذه الحالة، يمكن عرض ملف default.js للصفحات الفرعية التي لا تتطابق مع عنوان URL الحالي.

خذ بعين الاعتبار هيكل المجلدات التالي. تحتوي فتحة @team على صفحة settings، بينما لا تحتوي فتحة @analytics على ذلك.

المسارات المتوازية - مسارات غير متطابقة

عند التنقل إلى /settings، ستعرض فتحة @team صفحة settings مع الحفاظ على الصفحة النشطة الحالية لفتحة @analytics.

عند التحديث، سيعرض Next.js ملف default.js لـ @analytics. إذا لم يكن default.js موجودًا، فسيتم عرض خطأ 404 بدلاً من ذلك.

بالإضافة إلى ذلك، نظرًا لأن children هي فتحة ضمنية، فأنت بحاجة أيضًا إلى إنشاء ملف default.js لعرض بديل احتياطي لـ children عندما لا يتمكن Next.js من استعادة الحالة النشطة للصفحة الأصلية.

المرجع

params (اختياري)

وعد (promise) يحل إلى كائن يحتوي على معلمات المسار الديناميكي (dynamic route parameters) من الجزء الجذري وصولاً إلى الصفحات الفرعية للفتحة. على سبيل المثال:

export default async function Default({
  params,
}: {
  params: Promise<{ artist: string }>
}) {
  const { artist } = await params
}
export default async function Default({ params }) {
  const { artist } = await params
}
المثالعنوان URLparams
app/[artist]/@sidebar/default.js/zackPromise<{ artist: 'zack' }>
app/[artist]/[album]/@sidebar/default.js/zack/nextPromise<{ artist: 'zack', album: 'next' }>
  • نظرًا لأن الخاصية params هي وعد (promise)، يجب عليك استخدام async/await أو دالة use في React للوصول إلى القيم.
    • في الإصدار 14 وما قبله، كانت params خاصية متزامنة (synchronous). للمساعدة في التوافق مع الإصدارات السابقة، لا يزال بإمكانك الوصول إليها بشكل متزامن في Next.js 15، ولكن هذا السلوك سيتم إهماله في المستقبل.