نشر تطبيق Next.js — دليل شامل 2026

في المقال السابق، تعلمت المصادقة. الآن سنتعلم نشر تطبيق Next.js — حتى يراه العالم!

في هذا الدليل العملي، سنأخذك خطوة بخطوة لنشر تطبيقك على منصات مختلفة، مع تمارين وحلول.

خيارات النشر

المنصة	المميزات	العيوب
Vercel	الأفضل، مدمج، مجاني	قد يطلب ترقية
Firebase Hosting	مجاني، سريع	يحتاج تصدير ثابت
Netlify	سهل، مجاني	حدود أقل
Cloudflare Pages	سريع جداً، مجاني	يحتاج إعداد
AWS Amplify	قوي، احترافي	معقد

قبل النشر: التحضير

1. تحقق من package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

2. .gitignore

node_modules/
.next/
out/
.env
.env.local
.env*.local
.DS_Store
*.log

3. متغيرات البيئة

.env.local (للتطوير):

NEXTAUTH_SECRET=your-secret
NEXTAUTH_URL=http://localhost:3000
DATABASE_URL=...

⚠️ مهم: لا ترفع .env.local إلى Git!

4. next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "images.unsplash.com" },
    ],
  },
};

export default nextConfig;

النشر على Vercel (الأسهل)

1. ارفع الكود على GitHub

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/USERNAME/REPO.git
git push -u origin main

2. اذهب إلى Vercel

1. افتح vercel.com.
2. اضغط Sign Up.
3. اختر Continue with GitHub.
4. اسمح بالوصول.

3. أنشئ مشروعاً جديداً

1. اضغط Add New → Project.
2. اختر المستودع.
3. اضغط Import.

4. إعدادات النشر

• Framework Preset: Next.js (تلقائي).
• Root Directory: ./ (افتراضي).
• Environment Variables: أضف متغيراتك.

5. اضغط Deploy

النتيجة: سيبدأ النشر، وبعد دقائق:

🎉 Congratulations! Your project is live!
https://your-project.vercel.app

6. النطاق المخصص

1. Settings → Domains.
2. أضف نطاقك.
3. اتبع التعليمات (DNS).

النشر على Firebase Hosting

1. تثبيت Firebase CLI

npm install -g firebase-tools

2. تسجيل الدخول

firebase login

3. تهيئة المشروع

firebase init hosting

اختر:

• ✅ Use an existing project أو Create a new project.
• Public directory: out.
• Single-page app: No.
• Automatic builds with GitHub: No.

4. إعداد next.config.ts للتصدير الثابت

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export",
  trailingSlash: true,
  images: {
    unoptimized: true,
    remotePatterns: [
      { protocol: "https", hostname: "images.unsplash.com" },
    ],
  },
};

export default nextConfig;

5. firebase.json

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(js|css|woff|woff2|ttf|eot)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|ico)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=0, must-revalidate"
          },
          {
            "key": "X-Frame-Options",
            "value": "DENY"
          },
          {
            "key": "X-Content-Type-Options",
            "value": "nosniff"
          }
        ]
      }
    ]
  }
}

6. بناء المشروع

npm run build

النتيجة: سيتم إنشاء مجلد out/.

7. النشر

firebase deploy

النتيجة:

✔  Deploy complete!
Hosting URL: https://your-project.web.app

النشر على Netlify

1. ارفع الكود على GitHub

(كما في Vercel)

2. اذهب إلى Netlify

1. افتح netlify.com.
2. اضغط Sign up.
3. اختر GitHub.

3. أنشئ موقعاً جديداً

1. Add new site → Import an existing project.
2. اختر GitHub.
3. اختر المستودع.

4. الإعدادات

• Build command: npm run build
• Publish directory: .next
• Plugin: @netlify/plugin-nextjs

5. Deploy

اضغط Deploy site.

النشر على Cloudflare Pages

1. اذهب إلى Cloudflare

1. افتح pages.cloudflare.com.
2. اضغط Create a project.
3. اربط GitHub.

2. الإعدادات

• Build command: npm run build
• Build output directory: .next
• Framework preset: Next.js

3. Deploy

التصدير الثابت (Static Export)

للنشر على أي استضافة ثابتة:

1. next.config.ts

const nextConfig: NextConfig = {
  output: "export",
  trailingSlash: true,
  images: { unoptimized: true },
};

2. البناء

npm run build

3. النشر

ارفع مجلد out/ إلى أي استضافة:

• GitHub Pages.
• Netlify.
• Cloudflare Pages.
• Firebase Hosting.
• AWS S3.

⚠️ قيود التصدير الثابت

الميزة	مدعومة؟
SSG (Static Generation)	✅
SSR (Server-Side Rendering)	❌
API Routes	❌
Middleware	❌
Image Optimization	❌ (يحتاج unoptimized)
Server Actions	❌
next/font	✅
next/image (unoptimized)	✅

مشاكل التصدير الثابت

1. المسارات الديناميكية

تحتاج generateStaticParams:

export function generateStaticParams() {
  return [
    { slug: "post-1" },
    { slug: "post-2" },
  ];
}

2. API Routes

غير مدعومة. استخدم:

• خدمات خارجية (Formspree).
• Firebase Functions.

3. Middleware

غير مدعوم. استخدم:

• Client-side checks.
• Server-side redirects في الصفحات.

نصائح النشر

1. تحقق من البناء محلياً

npm run build
npm start

2. اختبر على أجهزة مختلفة

• الجوال.
• التابلت.
• المتصفحات المختلفة.

3. استخدم Lighthouse

• Performance.
• Accessibility.
• SEO.
• Best Practices.

4. مراقبة الأداء

• Vercel Analytics.
• Google Analytics.
• Sentry للأخطاء.

متغيرات البيئة في المنصات

Vercel

• Settings → Environment Variables.
• أضف كل المتغيرات.

Firebase

• استخدم .env أو Functions Config.

Netlify

• Site settings → Environment variables.

Cloudflare Pages

• Settings → Environment variables.

CI/CD (النشر التلقائي)

كل المنصات تدعم:

1. ارفع الكود إلى GitHub.
2. المنصة تكتشف التغيير.
3. تبني تلقائياً.
4. تنشر تلقائياً.

النتيجة: كل git push = نشر جديد.

تمارين عملية

تمرين 1: ارفع على GitHub

أنشئ مستودعاً وارفع الكود.

الحل:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/USERNAME/REPO.git
git push -u origin main

تمرين 2: انشر على Vercel

انشر مشروعك.

الحل:

1. vercel.com → Import Project.
2. اختر المستودع.
3. Deploy.

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

أضف NEXTAUTH_SECRET.

الحل:

• Vercel: Settings → Environment Variables.
• أضف NEXTAUTH_SECRET.

تمرين 4: نطاق مخصص

أضف نطاقك.

الحل:

• Vercel: Settings → Domains.
• أضف النطاق.
• اتبع DNS.

تمرين 5: التصدير الثابت

أعد إعداد next.config.ts.

الحل:

const nextConfig = {
  output: "export",
  trailingSlash: true,
  images: { unoptimized: true },
};

تمرين 6: انشر على Firebase

اتبع الخطوات.

الحل:

npm install -g firebase-tools
firebase login
firebase init hosting
npm run build
firebase deploy

تمرين 7: اختبر Lighthouse

افحص أداء موقعك.

الحل:

• افتح Chrome DevTools.
• Lighthouse.
• Analyze page load.

تمرين 8: أضف Analytics

أضف Vercel Analytics.

الحل:

npm install @vercel/analytics

// app/layout.tsx
import { Analytics } from "@vercel/analytics/react";

<Analytics />

حل المشاكل الشائعة

🔴 المشكلة 1: Build failed

الحل: افحص السجل في المنصة، وأصلح الأخطاء محلياً أولاً:

npm run build

🔴 المشكلة 2: Environment variable not found

الحل: أضف المتغيرات في إعدادات المنصة.

🔴 المشكلة 3: Module not found

الحل:

rm -rf node_modules package-lock.json
npm install

🔴 المشكلة 4: API Routes لا تعمل

السبب: على Vercel تعمل، لكن على Firebase لا.

الحل:

• Vercel: لا مشكلة.
• Firebase: استخدم خدمات خارجية.

🔴 المشكلة 5: الصور لا تظهر

السبب: unoptimized مفقود.

الحل:

images: { unoptimized: true },

جدول المنصات

المنصة	SSR	API	الثمن
Vercel	✅	✅	مجاني (Hobby)
Firebase	❌	❌	مجاني (Spark)
Netlify	✅	✅	مجاني
Cloudflare	✅	✅	مجاني

قائمة تحقق نهائية

المهمة	الحالة
تحضير المشروع	⬜
رفع على GitHub	⬜
النشر على Vercel	⬜
إضافة متغيرات البيئة	⬜
نطاق مخصص	⬜
التصدير الثابت (اختياري)	⬜
حل التمارين الثمانية	⬜

ماذا بعد هذا المقال؟

الآن بعد أن أتقنت النشر، أنت جاهز للمقال الأخير:

1. مشروع كامل — مدونة متكاملة.

الخلاصة

في هذا المقال، تعلمت:

• ✅ خيارات النشر.
• ✅ النشر على Vercel.
• ✅ النشر على Firebase.
• ✅ النشر على Netlify.
• ✅ التصدير الثابت.
• ✅ CI/CD.
• ✅ حل 8 تمارين عملية.

تذكر: النشر هو الخطوة الأخيرة — لكنها الأهم لتظهر للعالم.