لماذا يهم هذا الدرس؟
فهم بنية المشروع واستخدامه بصورة صحيحة داخل مشروع App Router. يضيف Next.js حول React التوجيه وServer Rendering وحدود البيانات وسلوك Production Build؛ وفهم شجرة المشروع يمنع الإحساس بأن Framework يعمل بالسحر.
كيف تفكر فيه؟
- في درس بنية المشروع، النتيجة التي يجب أن تتحقق: المجلد يمثل segment وpage.tsx يمثل واجهة ذلك المسار.
- في سياق بنية المشروع، الخطر الذي يجب أن يبقى تحت السيطرة: التعامل مع Next.js كأنه Client-only React يؤدي إلى JavaScript غير ضروري وأخطاء Server/Client Boundaries.
- تطبيق بنية المشروع: أنشئ App Router Project وحدد الملفات التي تملك Page وLayout وConfiguration وPublic Asset.
طبقات المشروع
Routes
تطبيق عملي
في التطبيق الخاص بدرس بنية المشروع: المجلد يمثل segment وpage.tsx يمثل واجهة ذلك المسار.
app/dashboard/page.tsxtsx
export default function DashboardPage() {
return <main><h1>Dashboard</h1></main>;
}جرّب بنفسك
تمرين بنية المشروع
أنشئ App Router Project وحدد الملفات التي تملك Page وLayout وConfiguration وPublic Asset.
- سجل النتيجة المتوقعة قبل التنفيذ
- اختبر حالة صحيحة وحالة فشل مرتبطة بالدرس
- اشرح في سطرين أين يوجد الحد المسؤول عن القرار