بناء الإنتاج وتجنّب أخطاء الحالة المربكة
المسار: تطوير نظام إدارة الأعراس ودعوات QR الوحدة: النشر والإنتاج
مدخل إلى الدرس: بناء الإنتاج وتجنّب أخطاء الحالة المربكة
بناء الإنتاج وتجنّب أخطاء الحالة المربكة — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي
طريقة الدراسة: اقرأ التعريف، تتبّع المثال في الشرح، نفّذه بنفسك، ثم اختبر النتيجة والحالات الاستثنائية قبل الانتقال.
خريطة بصرية للمفهوم
flowchart LR
A["طلبات المناسبة"]
B["إدارة الدعوات"]
C["إصدار QR"]
D["التحقق من الدعوة"]
E["متابعة الحضور"]
A --> B
B --> C
C --> D
D --> Eالتسلسل: طلبات المناسبة ← إدارة الدعوات ← إصدار QR ← التحقق من الدعوة ← متابعة الحضور.
أهداف هذا الدرس
- تشغيل npm run build وفهم ناتج Next.
- كشف الرسائل القياسية: static, dynamic, edge.
- غلق أخطاء الترجمة والـ hydration قبل النشر.
مثال
npm run build ▲ Next.js 14.x ✦ Creating an optimized production build ... ◇ Compiled successfully ━ Generating static pages (4/5) ... Route (app) Size First Load JS ┌ ○ / 1.2 kB 80.1 kB ├ ● /i/[token] 2.1 kB 82.0 kB (dynamic) ├ ├ ┌ /admin 1.5 kB 84.4 kB └ ● /api/checkin 0.7 kB 0.0 kB (dynamic) ✓ Compiled successfully ✓ Collecting page data ✓ Generating static pages ✓ Finalizing page building Linting and checking validity ... Collecting build data ... Exporting SSR for dynamic routes ... ✓ Generating static pages (5/5) Finalizing page building Total build time: 14.3s
المخطط: ما يفصح عنه ناتج البناء
flowchart TD
A["○ static — HTML يُبنى مرة واحدة (سريع جداً)"]
B["● dynamic — SSR لكل طلب
(يعتمد على request/params/cookies)"]
C["ƒ edge/streaming — تنفيذ عند الحافة"]
D["✕ خطأ — إصلاح قبل النشر"]
لماذا /i/[token] dynamic؟
لأنه يقرأ searchParams و params ويفعل DB؛ ضبط dynamicRoute يدل Next على عدم تجميده سكًا. لو استُخدمت generateStaticParams بلا قوائم pk قد تُجمَّد لا بياسته.
قبل النشر
قم بإصلاح كل تحذير (warning) من lint/type قبل الرفع — فبيئة الإنتاج أحياناً ترفض الجملة على كل خطأ TS حتى لو بدا محلياً.
تمرين تطبيقي: شغّل build وشاهد خرج صفحاتك؛ ميز مدين التطبيق static/dynamic ثم أصلح أي استيراد غير مستخدم.
أخطاء شائعة يجب تفاديها
- تجاهل أحد تحذيرات TypeScript — تنكسر على Vercel.
- اعتبار dynamic خطأ — هو Intent صحيح للـ /i/[token].
- دفع الكود دون build أخير يمر أحياناً بغفلة.
معجم مصطلحات الدرس
- static generation
- حفظ HTML جاهز مبكراً وتسليمه بسكناً.
- SSR
- عرض خادمي لكل طلب عند الحاجة للبيانات.
- First Load JS
- حجم JS الابتدائي للصفحة للعميل.
مراجعة وتمرين تثبيت المهارة
اختبار سريع: اشرح بعبارتك معنى «بناء الإنتاج وتجنّب أخطاء الحالة المربكة»، ثم بيّن أين ستستخدمه داخل نظام تسجيل حضور دعوات مناسبة عبر رمز QR، وما الخطأ الذي يجب اختباره قبل الاعتماد على الحل.
تحدٍّ إضافي: غيّر شرطًا واحدًا في التطبيق، وتوقع النتيجة، ثم نفّذ الاختبار وفسّر الاختلاف.
الدرس التالي: نشر المشروع على Vercel. من الأفضل إنهاء التجربة الحالية قبل متابعة الدرس التالي.
