لماذا يهم هذا الدرس؟

فهم Segments وPages واستخدامه بصورة صحيحة داخل مشروع App Router. يربط App Router المجلدات بـRoute Segments بينما تحدد page وlayout الواجهة والبنية المشتركة؛ والNesting جزء من نموذج URL وRendering.

كيف تفكر فيه؟

  • في درس Segments وPages، النتيجة التي يجب أن تتحقق: المجلد يمثل segment وpage.tsx يمثل واجهة ذلك المسار.
  • في سياق Segments وPages، الخطر الذي يجب أن يبقى تحت السيطرة: إضافة مجلدات دون فهم هل تنشئ URL Segments قد يولد Routes غير مقصودة وLayouts مكررة.
  • تطبيق Segments وPages: ابن Dashboard Route متداخلة مع Shared Layout وراقب أي UI يبقى أثناء التنقل بين Child Pages.

تطبيق عملي

في التطبيق الخاص بدرس Segments وPages: المجلد يمثل segment وpage.tsx يمثل واجهة ذلك المسار.

app/dashboard/page.tsxtsx
export default function DashboardPage() {
  return <main><h1>Dashboard</h1></main>;
}

جرّب بنفسك

Practice

تمرين Segments وPages

ابن Dashboard Route متداخلة مع Shared Layout وراقب أي UI يبقى أثناء التنقل بين Child Pages.

  • سجل النتيجة المتوقعة قبل التنفيذ
  • اختبر حالة صحيحة وحالة فشل مرتبطة بالدرس
  • اشرح في سطرين أين يوجد الحد المسؤول عن القرار

الخلاصة