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

فهم ما الذي يضيفه Next.js إلى React واستخدامه بصورة صحيحة داخل مشروع App Router. يضيف Next.js حول React التوجيه وServer Rendering وحدود البيانات وسلوك Production Build؛ وفهم شجرة المشروع يمنع الإحساس بأن Framework يعمل بالسحر.

كيف تفكر فيه؟

  • في درس ما الذي يضيفه Next.js إلى React، النتيجة التي يجب أن تتحقق: اجعل المثال صغيرًا حتى يوضح الفكرة دون إخفائها داخل تفاصيل غير مرتبطة.
  • في سياق ما الذي يضيفه Next.js إلى React، الخطر الذي يجب أن يبقى تحت السيطرة: التعامل مع Next.js كأنه Client-only React يؤدي إلى JavaScript غير ضروري وأخطاء Server/Client Boundaries.
  • تطبيق ما الذي يضيفه Next.js إلى React: أنشئ App Router Project وحدد الملفات التي تملك Page وLayout وConfiguration وPublic Asset.

تطبيق عملي

في التطبيق الخاص بدرس ما الذي يضيفه Next.js إلى React: اجعل المثال صغيرًا حتى يوضح الفكرة دون إخفائها داخل تفاصيل غير مرتبطة.

example.tsxtsx
export default function Example() {
  return <section>Next.js concept in a focused component</section>;
}

جرّب بنفسك

Practice

تمرين ما الذي يضيفه Next.js إلى React

أنشئ App Router Project وحدد الملفات التي تملك Page وLayout وConfiguration وPublic Asset.

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

الخلاصة