الهدف
بعد هالدرس تقدر تبني Next.js app من الصفر في أقل من 15 دقيقة، تتجول في الـ structure وتفهم وين كل شي، وترفع الكود على GitHub جاهز للـ deployment.
ليش هذا الحين؟
كتبت الـ brief — الحين وقت الكود. الـ scaffold هو اللحظة اللي يتحول فيها المشروع من فكرة لـ repo حقيقي. هذا يعطيك momentum، وبدون momentum المشاريع تموت. الـ scaffold الصح من البداية يوفر عليك ساعات من إعادة الشغل بعدين — الـ TypeScript والـ app router وباقي الخيارات مو عشوائية.
الفكرة
الـ scaffold هو الهيكل الأساسي للـ app — مثل الهيكل العظمي. كل شي تبنيه بعدين يرتكز عليه.
الـ stack اللي نستخدمه:
- Next.js — React framework مع server-side rendering و app router
- TypeScript — JavaScript + types = أقل bugs
- Tailwind CSS — utility-first CSS، بدون كتابة CSS files
- ESLint — يكتشف errors قبل ما يشتغل الكود
create-next-app flags المهمة:
--ts— TypeScript من البداية (دايما)--app— App Router (مو Pages Router، ذاك قديم)--tailwind— Tailwind جاهز--eslint— linting جاهز--src-dir— كودك كله داخلsrc/— أنظف--import-alias "@/*"— بدل../../..تكتب@/components/...
الملفات الأساسية:
| ملف | وظيفته |
|---|---|
package.json |
الـ dependencies والـ scripts |
tsconfig.json |
إعدادات TypeScript |
tailwind.config.ts |
إعدادات Tailwind |
src/app/page.tsx |
الـ homepage |
src/app/layout.tsx |
الـ root layout — يلف كل الـ pages |
.env.local |
الـ environment variables السرية |
الـ App Router:
كل folder داخل src/app/ يصير route تلقائيا. src/app/dashboard/page.tsx = /dashboard. بسيط.