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

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

كيف تفكر فيه؟

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

بنية App Router

تطبيق عملي

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

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

جرّب بنفسك

Practice

تمرين أساسيات App Router

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

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

الخلاصة