مقدمة إلى Next.js وأسباب اختياره
المسار: تطوير نظام إدارة الأعراس ودعوات QR الوحدة: إعداد المشروع والتقنيات
مدخل إلى الدرس: مقدمة إلى Next.js وأسباب اختياره
مقدمة إلى Next.js وأسباب اختياره — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي
طريقة الدراسة: اقرأ التعريف، تتبّع المثال في الشرح، نفّذه بنفسك، ثم اختبر النتيجة والحالات الاستثنائية قبل الانتقال.
خريطة بصرية للمفهوم
flowchart LR
A["طلبات المناسبة"]
B["إدارة الدعوات"]
C["إصدار QR"]
D["التحقق من الدعوة"]
E["متابعة الحضور"]
A --> B
B --> C
C --> D
D --> Eالتسلسل: طلبات المناسبة ← إدارة الدعوات ← إصدار QR ← التحقق من الدعوة ← متابعة الحضور.
أهداف هذا الدرس
- فهم البنية الحديثة لـ Next.js (App Router، خادم وعميل).
- تفسير لماذا Next.js + React مناسبة لدعوات QR ومتاجر API.
- تمييز مكوّنات الخادم (Server) من مكوّنات العميل (Client).
المخطط: أين يقع Next.js في معمارية النظام؟
flowchart TD
C(["المتصفح (العميل)"])
C -->|حزم JS/HTML معمّاة| N(("Next.js (الخادم)"))
N --> RSC["Server Components (RSC)
تُنفّذ على الخادم"]
N --> RH["Route Handlers"]
RSC -->|HTML جاهز| C
RH -->|JSON APIs| C
N -->|Prisma Client| PG[("PostgreSQL")]
أين تولد القوة؟
- App Router: ملفات page.tsx و route.ts داخل مجلدات تحدد المسارات بنفسها.
- React Server Components: الجلب من قاعدة البيانات يجري على الخادم دون تفريغ الرمز للعميل.
- Route Handlers: صفحات route.ts تُنشئ واجهات REST بسيطة بدون Express إضافي.
- تحسين تلقائي: static generation و incremental caching وخفض الحجوم.
قاعدة أساسية في المسار
سيتم كل عمل قاعدة البيانات في Server Components و Route Handlers. التفاعل الحي (نماذج، لوحات) يُصرَّح به فقط في ملفات تحمل توجيهات 'use client'.
مقارنة سريعة
| الخيار | ماذا يوفر | ملاحظة لتطبيقنا |
|---|---|---|
| Next.js + RSC | جلب مباشر للبيانات في الصفحة + APIs موحدة | خيارنا مما سبق |
| React فقط (Vite) | SPA بلا SSR | يُفقد SEO وعرض الدعوات عبر الروابط |
| Express + React | فصل لواجهة API فقط | أكثر إدارة، وأقل تلازماً |
تمرين تطبيقي: افتح صفحة أي دعوة إلكترونية وعدّ: هل تُحمَّل المحتويات قبل نزول حزم JS؟ ما الذي يخبرك به ذلك عن جيل الخادم؟
الخلاصة السريعة
- Next.js يعمل على الخادم: صفحات + واجهات في مشروع واحد.
- App Router + RSC يجعلان الجلب آمناً وبقرب الكود.
- التفاعل الحي مقصور على مكوّنات 'use client'.
أخطاء شائعة يجب تفاديها
- قلب كل صفحة 'use client' — يفقدون الربح بعدم تسريب بيانات القاعدة.
- وضع منطق قاعدة البيانات في مكوّ�ن العميل وتمريره عبر props غير آمن.
- تحميل Express إضافي بلا حاجة في مشروع Next.js.
معجم مصطلحات الدرس
- App Router
- نظام المسارات الجديد بالملفات داخل مجلد app.
- Server Component
- مكوّن يُنفَّذ على الخادم ويُرسل HTML جاهزاً.
- Route Handler
- ملف route.ts يقدم واجهات HTTP لمسار معيّن.
مراجعة وتمرين تثبيت المهارة
اختبار سريع: اشرح بعبارتك معنى «مقدمة إلى Next.js وأسباب اختياره»، ثم بيّن أين ستستخدمه داخل نظام تسجيل حضور دعوات مناسبة عبر رمز QR، وما الخطأ الذي يجب اختباره قبل الاعتماد على الحل.
تحدٍّ إضافي: غيّر شرطًا واحدًا في التطبيق، وتوقع النتيجة، ثم نفّذ الاختبار وفسّر الاختلاف.
الدرس التالي: إنشاء مشروع Next.js وتجربته. من الأفضل إنهاء التجربة الحالية قبل متابعة الدرس التالي.
