الخطوات

1
ارفع مشروعك على GitHub

يعتمد Vercel على مستودعات Git للنشر. إذا لم يكن مشروعك على GitHub بعد، أنشئ مستودعًا وارفع الكود عليه. يدعم Vercel أيضًا GitLab وBitbucket، لكن GitHub يمنحك أفضل تكامل (نشرات معاينة تلقائية عند فتح pull requests، وفحوصات حالة النشر).
bash
```
git init
git add -A
git commit -m "initial commit"
gh repo create my-next-app --public --push
# أو أنشئ المستودع عبر واجهة GitHub ثم:
# git remote add origin https://github.com/you/my-next-app.git
# git push -u origin main
```
2
استورد المشروع في Vercel

اذهب إلى vercel.com/new، انقر Import Git Repository، وفوّض تطبيق GitHub. سيكتشف Vercel الإطار تلقائيًا — ستجد Next.js تحت Framework Preset. أمر البناء (next build) ومجلد الإخراج (.next) معيّنان مسبقًا ولا حاجة لتغييرهما.
بدلًا من ذلك، يمكنك استخدام CLI للعمل من الطرفية فقط:
bash
```
npm i -g vercel
vercel
# اتبع التعليمات:
# ? Set up and deploy "my-next-app"? Y
# ? Which scope? (اسم المستخدم أو الفريق)
# ? Link to existing project? N
# ? What's your project's name? my-next-app
# ? In which directory is your code located? ./
# ✓ Detected Next.js — overrides applied automatically
```
3
أضف متغيرات البيئة
لا ترفع ملف .env.local أبدًا على Git. بدلًا من ذلك، أضف كل متغير في لوحة تحكم Vercel تحت Settings → Environment Variables. يتيح Vercel تخصيص كل متغير لثلاث بيئات منفصلة:
- Production — نشر الفرع الرئيسي main
- Preview — أي فرع آخر وكل pull request
- Development — تُجلَب محليًا عبر vercel env pull
اسحب المتغيرات إلى ملف .env.local المحلي دون كتابتها يدويًا:
bash
```
vercel env pull .env.local
# ينشئ .env.local بالمتغيرات المخصصة لبيئة Development
# .env.local مُدرج في .gitignore افتراضيًا في Next.js — أبقه كذلك
```
4
النشر للمعاينة مقابل الإنتاج

تشغيل vercel بدون أي flags ينشئ نشرة معاينة — برابط فريد مثل my-next-app-abc123.vercel.app غير مرتبط بنطاق الإنتاج. هذا آمن للاختبار.
تشغيل vercel --prod ينشر على نطاق الإنتاج. الدفع إلى فرع main عبر Git يطلق نشرة إنتاج تلقائيًا أيضًا.
bash
```
# نشرة معاينة (رابط فريد، ليست إنتاجًا)
vercel

# نشرة إنتاج (ترتبط بنطاقك)
vercel --prod

# أو ادفع إلى main وسيتكفل Vercel CI بالباقي
git push origin main
```
5
اربط نطاقًا مخصصًا
في لوحة تحكم Vercel، اذهب إلى مشروعك ← Settings → Domains ← أضف نطاقك. سيعرض Vercel أحد خيارين لسجلات DNS:
- CNAME — أشر نطاقًا فرعيًا مثل www إلى cname.vercel-dns.com
- A record — أشر النطاق الجذر (@) إلى 76.76.21.21
أضف الاثنين إذا أردت أن يعمل كل من example.com وwww.example.com. يوفّر Vercel شهادة TLS من Let's Encrypt تلقائيًا بعد انتشار DNS (عادةً أقل من 10 دقائق).
6

افهم نشرات المعاينة التلقائية

في كل مرة تفتح pull request على فرع main، يبني Vercel الفرع وينشر رابط معاينة فريدًا كتعليق في الـ PR. يستطيع المراجعون زيارة المعاينة الحية دون سحب الفرع محليًا.
تستخدم نشرات المعاينة متغيرات البيئة المخصصة لبيئة Preview، مما يتيح توجيهها إلى قاعدة بيانات تجريبية بدلًا من الإنتاج. هذا هو السبب الرئيسي لتخصيص المتغيرات لكل بيئة على حدة.
7
أصلح أشيع أخطاء البناء
معظم فشل النشر الأول يقع في فئتين:
- متغير بيئة مفقود — يقرأ البناء process.env.SOME_KEY ويجد undefined. أضف المتغير في اللوحة (نطاق Production) وأعد النشر.
- إصدار Node.js خاطئ — يعتمد Vercel على الإصدار المحدد في حقل engines بملف package.json. إذا كان الحقل غائبًا، حدده صراحةً أو اضبطه في اللوحة تحت Settings → General → Node.js Version.
json
```
// package.json — حدد إصدار Node
{
  "engines": {
    "node": ">=20.0.0"
  }
}
```
8
راجع مخرجات البناء والسجلات

لكل نشرة سجل بناء كامل في لوحة تحكم Vercel تحت Deployments → (اختر النشرة) → Build Logs. إذا نجحت النشرة لكن الموقع يتصرف بشكل غير متوقع في وقت التشغيل، تحقق من Functions → Logs لأخطاء جانب الخادم. يمكنك أيضًا متابعة السجلات من CLI:
bash
```
# متابعة سجلات وقت التشغيل لنشرة الإنتاج
vercel logs my-next-app --follow

# فحص نشرة بعينها عبر رابطها
vercel inspect https://my-next-app-abc123.vercel.app
```

نصائح ومحاذير

استخدم ميزة "Instant Rollback" في لوحة تحكم Vercel للرجوع إلى أي نشرة سابقة بنقرة واحدة — دون الحاجة لـ Git revert.
اضبط DATABASE_URL مختلفًا لبيئات Preview يشير إلى قاعدة بيانات تجريبية حتى لا تلمس pull requests بيانات الإنتاج أبدًا.
ملف `vercel.json` يتيح ضبط redirects وrewrites والترويسات ومناطق edge functions — مفيد للتوجيه المخصص الذي يتجاوز إعدادات Next.js.
إذا كنت تستخدم monorepo، حدد Root Directory في Vercel ليشير إلى مجلد حزمة Next.js حتى يعمل البناء من المكان الصحيح.

خاتمة

يزيل Vercel تقريبًا كل عبء البنية التحتية من نشر Next.js. الجمع بين نشرات المعاينة التلقائية ومتغيرات البيئة المنفصلة والكشف التلقائي عن الإطار يعني أنك تستطيع الانتقال من مشروع محلي إلى رابط إنتاج في أقل من خمس دقائق. بمجرد إعداد تكامل Git، كل دفعة إلى main تصبح نشرة — دون أي خطوات يدوية.

#Next.js #Vercel #Deployment

العودة إلى جميع الأدلة

كيفية نشر تطبيق Next.js على Vercel

الخطوات

ارفع مشروعك على GitHub

استورد المشروع في Vercel

أضف متغيرات البيئة

النشر للمعاينة مقابل الإنتاج

اربط نطاقًا مخصصًا

افهم نشرات المعاينة التلقائية

أصلح أشيع أخطاء البناء

راجع مخرجات البناء والسجلات

نصائح ومحاذير

خاتمة

أدلة ذات صلة

كيفية نشر تطبيق Laravel على خادم VPS (Apache و MySQL)

كيفية إضافة دعم متعدد اللغات لتطبيق Laravel

كيفية إرسال رسائل بريد إلكتروني عبر Laravel

هل تحتاج مساعدة في مشروعك؟