دورة تطوير نظام إدارة الأعراس والمناسبات ودعوات QR عمليًا

نشر المشروع على Vercel

نشر المشروع على Vercel — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي
وقت الدراسة
12 دقيقة

المسار: تطوير نظام إدارة الأعراس ودعوات QR الوحدة: النشر والإنتاج

مدخل إلى الدرس: نشر المشروع على Vercel

نشر المشروع على Vercel — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي

طريقة الدراسة: اقرأ التعريف، تتبّع المثال في الشرح، نفّذه بنفسك، ثم اختبر النتيجة والحالات الاستثنائية قبل الانتقال.

أهداف هذا الدرس

  • ربط مستودع Git بإصدار كما هو على المنصة Vercel.
  • إعداد بيئة النشر (root، Node، Build Command).
  • النشر الأول: من git push إلى URL حي.

المخطط: تدفق النشر على Vercel من الدفع إلى الربط

flowchart TD
    A["git push (main)"] --> B["Vercel Build
npm install → prisma generate → npm run build"] B --> M["prisma migrate deploy (release script)"] M --> E["تعيين env vars
DATABASE_URL · SIGNING_SECRET"] E --> U["URL: name.vercel.app + نطاق مخصص"]

مثال

# إعداد سكربت إصدار DB على Vercel
# package.json
"scripts": {
  "postinstall": "prisma generate",
  "build": "prisma migrate deploy && next build"
}

مثال

pushd ../wedding-events && git add . && git commit -m "deploy wedding system" && git push origin main

أين يُضبط Node و Build؟

  • افتراضياً Vercel يكشف Next أوتوماتيكياً (Framework Presets).
  • ضبط Node في Project Settings → Node.js Version.
  • Build Command المكتوب؛ نسخته الآمنة في package.json scripts كي يبقى موثقاً.

ترتيب المتغيرات أوّلاً

خطأ شائع: تُبنى على Vercel دون DATABASE_URL، فيرفعها prisma migrate deploy رفضاً. أدخل كل المتغيرات قبل أول build، فالمنصة لا تلمس .env.

تمرين تطبيقي: ارفع المستودع لـ GitHub ثم اربطه في Vercel، واضبط المتغيرات أولاً، وراقب سجل أول بناء يحيا URL.

أخطاء شائعة يجب تفاديها

  • دعوة البناء الزراعي بلا prisma generate → العميل لا يتولَّد.
  • رفع أسرار بيئة الإنتاج من واجهة خاطئة (Staging/Develop بدل Production).
  • تجاهل الشروط prisma migrate deploy في Production حتى لا تفرغ الجداول.

معجم مصطلحات الدرس

Framework Presets
كشف Vercel عن نوع المشروع وتكوينه.
release script
خطوة تنجز قبل بدء الإنتاج (ترحيلات).
env vars
متغيرات بيئة تُضخ تحت وقت البدء للخادم.

مراجعة وتمرين تثبيت المهارة

اختبار سريع: اشرح بعبارتك معنى «نشر المشروع على Vercel»، ثم بيّن أين ستستخدمه داخل نظام تسجيل حضور دعوات مناسبة عبر رمز QR، وما الخطأ الذي يجب اختباره قبل الاعتماد على الحل.

تحدٍّ إضافي: غيّر شرطًا واحدًا في التطبيق، وتوقع النتيجة، ثم نفّذ الاختبار وفسّر الاختلاف.

الدرس التالي: قاعدة بيانات إنتاج مُدارة وأمانها. من الأفضل إنهاء التجربة الحالية قبل متابعة الدرس التالي.

دروس نصية

#1

نظرة عامة على الدورة والمخرجات

#2

مقدمة إلى Next.js وأسباب اختياره

#3

أساسيات schema.prisma والنماذج

#4

مقدمة Route Handlers وبنية الاستجابة

#5

فهم Server Components والجلب الآمن

#6

تصميم الرمز Secured والتوقيع HMAC

#7

بناء الإنتاج وتجنّب أخطاء الحالة المربكة

#8

تحليل المتطلبات وتحديد الكيانات

#9

إنشاء مشروع Next.js وتجربته

#10

نموذج المناسبة Event بالعلاقات

#11

واجهة إنشاء المناسبة POST /api/events

#12

تصميم صفحة الدعوة الإلكترونية

#13

توليد صورة QR من قاعدة الدعوة

#14

نشر المشروع على Vercel

#15

تصميم قاعدة البيانات والعلاقات

#16

تجريب PostgreSQL محلياً وإنشاء قاعدة الداتا

#17

نموذج المدعو Guest مع الرمز الموقّع

#18

واجهات الضيوف الإضافة والقائمة

#19

نموذج الرد RSVP التفاعلي

#20

تجربة المسح في بوابة الحفل

#21

قاعدة بيانات إنتاج مُدارة وأمانها

#22

تدفق الدعوة وقراءة QR من التوليد إلى الحضور

#23

تثبيت Prisma والاتصال بالقاعدة

#24

نموذج الرد Rsvp ومنع التكرار

#25

واجهة تسجيل الحضور POST /api/checkin

#26

صفحة قائمة الضيوف والفرز

#27

واجهة تتفهم حالة الحضور والحصر

#28

إدارة المتغيرات السرية بيئة وواجهة

#29

سيناريو المشروع وقواعد العمل

#30

بنية مجلدات المشروع ومسارات الصفحات

#31

الاستعلام والجلب مع العلاقات

#32

التحقق من المدخلات ومعالجة الأخطاء

#33

لوحة الإحصائيات الحية

#34

تأمين الروابط والهجمات الشائعة

#35

قائمة الفحص النهائي قبل الإطلاق

#36

الترحيلات migrations والبذور seed

عرض الدروس كاملة تحقق من صفحة تعلم الدورة
درس نصي 2/36
أنت تشاهد
نشر المشروع على Vercel