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

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

كيف تفكر فيه؟

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

تطبيق عملي

في التطبيق الخاص بدرس إنشاء مشروع Next.js: اختر TypeScript وApp Router في مشروع جديد لتتوافق الأمثلة مع الدورة.

terminalbash
npx create-next-app@latest demo
cd demo
npm run dev

جرّب بنفسك

Practice

تمرين إنشاء مشروع Next.js

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

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

الخلاصة