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

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

كيف تفكر فيه؟

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

تطبيق عملي

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

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

جرّب بنفسك

Practice

تمرين Layouts

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

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

الخلاصة