إنشاء مشروع Next.js وتجربته
المسار: تطوير نظام إدارة الأعراس ودعوات QR الوحدة: إعداد المشروع والتقنيات
مدخل إلى الدرس: إنشاء مشروع Next.js وتجربته
إنشاء مشروع Next.js وتجربته — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي
طريقة الدراسة: اقرأ التعريف، تتبّع المثال في الشرح، نفّذه بنفسك، ثم اختبر النتيجة والحالات الاستثنائية قبل الانتقال.
أهداف هذا الدرس
- إنشاء مشروع Next.js جديد بالإعدادات الصحيحة.
- تشغيل الخادم المحلي وفحص أول صفحة.
- تهيئة Tailwind و TypeScript من أمر واحد.
المخطط: التدفق خطوة بخطوة لإنشاء المشروع
flowchart TD
A["npx create-next-app@latest"] --> Q{"سؤال تفاعلي"}
Q -->|اختر| C["TypeScript → Yes
ESLint → Yes
Tailwind → Yes
App Router → Yes
src؟ → No للمحافظة
Turbopack → Yes"]
C --> D["npm run dev"] --> H[("http://localhost:3000")]
مثال
npx create-next-app@latest wedding-events Need to install the following packages: create-next-app@14.x.y Ok to proceed? (y) y ✔ Would you like to use TypeScript? .. Yes ✔ Would you like to use ESLint? ....... Yes ✔ Would you like to use Tailwind CSS? .. Yes ✔ Would you like to use `src/` directory? No ✔ Would you like to use App Router? ..... Yes ✔ Would you like to use Turbopack? ...... Yes cd wedding-events npm run dev # http://localhost:3000 ← الصفحة الافتراضية تعمل
ماذا أنتج الأمر لك؟
package.json— قائمة الاعتماديات وأوامر scripts.app/page.tsx— صفحة البداية (Server Component).app/layout.tsx— الهيكل العام (لغة، اتجاه، خطوط).tailwind.config.ts+postcss.config.mjs— تنسيق.tsconfig.json— إعدادات TypeScript.
لا تهتم بشكل الصفحة الآن
تحقق من التشغيل أوّلاً بأمر npm run dev قبل أي سطر أعمال. مراقبة الأخطاء من أول دقيقة تختصر مشكلات البيئة لاحقاً.
طوابير التوافق مع إصداراتنا
| الحزمة | الهدف في مشروعنا | لاحظتها |
|---|---|---|
| next | الملعب والمتاجر | المسار يعتمد الأحدث المستقر |
| prisma | نمذجة وتجاهل قاعدة البيانات | سيتثبّت في فصل قادم |
| @prisma/client | قراءة/كتابة | يُولَّد بنسخة schema تساوي |
| qrcode | توليد الصور | يُضاف في فصل QR |
تمرين تطبيقي: أنشئ مشروعاً باسم wedding-events بالإعدادات أعلاه، ثم استبدل نص صفحة البداية بعنوان «منظّم الأعراس» وتأكد من تحديث المتصفح.
أخطاء شائعة يجب تفاديها
- تخطي TypeScript — تفقد أمان تعريف القيم في قاعدة البيانات.
- اختيار مسار باكستري (src/) يغيّر مواضع الملفات في دروسنا.
- الاستمرار في تعديلات قبل أول تشغيل ناجح لـ dev.
معجم مصطلحات الدرس
- create-next-app
- أمر يبني نموذج مشروع كامل بالمطالبات.
- App Router
- مجلد app يحدد المسارات بملفاته page/layout.
- Turbopack
- محرك تجميع أسرع لخادم التطوير.
مراجعة وتمرين تثبيت المهارة
اختبار سريع: اشرح بعبارتك معنى «إنشاء مشروع Next.js وتجربته»، ثم بيّن أين ستستخدمه داخل نظام تسجيل حضور دعوات مناسبة عبر رمز QR، وما الخطأ الذي يجب اختباره قبل الاعتماد على الحل.
تحدٍّ إضافي: غيّر شرطًا واحدًا في التطبيق، وتوقع النتيجة، ثم نفّذ الاختبار وفسّر الاختلاف.
الدرس التالي: تجريب PostgreSQL محلياً وإنشاء قاعدة الداتا. من الأفضل إنهاء التجربة الحالية قبل متابعة الدرس التالي.
