📖 سلسلة تعلم React و Next.js | المقال 2

🚀 إنشاء مشروع Next.js جديد

في 5 دقائق فقط، ستكون جاهزاً لبناء أول تطبيق لك!

📋 المتطلبات: Node.js مثبت على جهازك

⚡ الأمر السحري

افتح PowerShell في المجلد الذي تريد إنشاء المشروع فيه:

# 1. أنشئ المشروع
npx create-next-app@latest my-app

# 2. ادخل المشروع
cd my-app

# 3. شغّل
npm run dev

# 4. افتح المتصفح
# http://localhost:3000

❓ الأسئلة أثناء التثبيت

سيطلب منك عدة أسئلة، هذه الإجابات الموصى بها:

السؤال	الإجابة	السبب
TypeScript?	✅ Yes	كود آمن وأقل أخطاء
ESLint?	✅ Yes	كود أنظف
Tailwind CSS?	✅ Yes	تنسيق سريع
src/ directory?	✅ Yes	تنظيم أفضل
App Router?	✅ Yes	الأحدث والأفضل
Customize import alias?	❌ No	الافتراضي كافي

📁 هيكل المشروع

my-app/
├── src/
│   ├── app/              # الصفحات
│   │   ├── page.tsx      # الصفحة الرئيسية (/)
│   │   ├── layout.tsx    # القالب العام
│   │   └── globals.css   # الأنماط
│   └── components/       # المكونات (أنشئها)
├── public/               # ملفات ثابتة
├── package.json          # المكتبات
└── next.config.ts        # إعدادات Next.js

🎯 الملفات المهمة

الملف	الوظيفة
src/app/page.tsx	الصفحة الرئيسية
src/app/layout.tsx	قالب كل الصفحات
src/app/globals.css	CSS عام
src/components/	مكوناتك القابلة لإعادة الاستخدام

⚡ أوامر مهمة

الأمر	الوظيفة
npm run dev	تشغيل التطبيق (localhost:3000)
npm run build	بناء للإنتاج
npm run start	تشغيل النسخة المبنية

🎉 تهانينا!

مشروعك جاهز! 🚀

افتح src/app/page.tsx وابدأ التعديل!

🚀 الخطوة التالية

في المقال القادم سنتعلم Components و JSX!

📌 تسميات: Next.js تعلم برمجة بداية

✨ ← المقال السابق | المقال التالي → ✨

سلسلة تعلم React و Next.js مع Ahmed Issa