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

في المقال السابق، تعلمت المصادقة. الآن سنتعلم **نشر تطبيق Next.js** — حتى يراه العالم! في هذا الدليل العملي، سنأخذك خطوة بخطوة لنشر تطبيقك على منصات مختلفة، مع تمارين وحلول. ## خيارات النشر <table> <thead> <tr> <th>المنصة</th> <th>المميزات</th> <th>العيوب</th> </tr> </thead> <tbody> <tr> <td><strong>Vercel</strong></td> <td>الأفضل، مدمج، مجاني</td> <td>قد يطلب ترقية</td> </tr> <tr> <td><strong>Firebase Hosting</strong></td> <td>مجاني، سريع</td> <td>يحتاج تصدير ثابت</td> </tr> <tr> <td><strong>Netlify</strong></td> <td>سهل، مجاني</td> <td>حدود أقل</td> </tr> <tr> <td><strong>Cloudflare Pages</strong></td> <td>سريع جداً، مجاني</td> <td>يحتاج إعداد</td> </tr> <tr> <td><strong>AWS Amplify</strong></td> <td>قوي، احترافي</td> <td>معقد</td> </tr> </tbody> </table> ## قبل النشر: التحضير ### 1. تحقق من `package.json` ```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`** (للتطوير): ```bash NEXTAUTH_SECRET=your-secret NEXTAUTH_URL=http://localhost:3000 DATABASE_URL=... ``` **⚠️ مهم:** لا ترفع `.env.local` إلى Git! ### 4. `next.config.ts` ```typescript import type { NextConfig } from "next"; const nextConfig: NextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "images.unsplash.com" }, ], }, }; export default nextConfig; ``` ## النشر على Vercel (الأسهل) ### 1. ارفع الكود على GitHub ```bash 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](https://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 ```bash npm install -g firebase-tools ``` ### 2. تسجيل الدخول ```bash firebase login ``` ### 3. تهيئة المشروع ```bash 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` للتصدير الثابت ```typescript 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` ```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. بناء المشروع ```bash npm run build ``` **النتيجة:** سيتم إنشاء مجلد `out/`. ### 7. النشر ```bash firebase deploy ``` **النتيجة:** ``` ✔ Deploy complete! Hosting URL: https://your-project.web.app ``` ## النشر على Netlify ### 1. ارفع الكود على GitHub (كما في Vercel) ### 2. اذهب إلى Netlify 1. افتح [netlify.com](https://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](https://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` ```typescript const nextConfig: NextConfig = { output: "export", trailingSlash: true, images: { unoptimized: true }, }; ``` ### 2. البناء ```bash npm run build ``` ### 3. النشر ارفع مجلد `out/` إلى أي استضافة: - GitHub Pages. - Netlify. - Cloudflare Pages. - Firebase Hosting. - AWS S3. ## ⚠️ قيود التصدير الثابت <table> <thead> <tr> <th>الميزة</th> <th>مدعومة؟</th> </tr> </thead> <tbody> <tr> <td><strong>SSG (Static Generation)</strong></td> <td>✅</td> </tr> <tr> <td><strong>SSR (Server-Side Rendering)</strong></td> <td>❌</td> </tr> <tr> <td><strong>API Routes</strong></td> <td>❌</td> </tr> <tr> <td><strong>Middleware</strong></td> <td>❌</td> </tr> <tr> <td><strong>Image Optimization</strong></td> <td>❌ (يحتاج unoptimized)</td> </tr> <tr> <td><strong>Server Actions</strong></td> <td>❌</td> </tr> <tr> <td><strong>next/font</strong></td> <td>✅</td> </tr> <tr> <td><strong>next/image (unoptimized)</strong></td> <td>✅</td> </tr> </tbody> </table> ## مشاكل التصدير الثابت ### 1. المسارات الديناميكية **تحتاج `generateStaticParams`:** ```tsx 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. تحقق من البناء محلياً ```bash 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 أنشئ مستودعاً وارفع الكود. **الحل:** ```bash 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](https://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`. **الحل:** ```typescript const nextConfig = { output: "export", trailingSlash: true, images: { unoptimized: true }, }; ``` ### تمرين 6: انشر على Firebase اتبع الخطوات. **الحل:** ```bash 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. **الحل:** ```bash npm install @vercel/analytics ``` ```tsx // app/layout.tsx import { Analytics } from "@vercel/analytics/react"; <Analytics /> ``` ## حل المشاكل الشائعة ### 🔴 المشكلة 1: `Build failed` **الحل:** افحص السجل في المنصة، وأصلح الأخطاء محلياً أولاً: ```bash npm run build ``` ### 🔴 المشكلة 2: `Environment variable not found` **الحل:** أضف المتغيرات في إعدادات المنصة. ### 🔴 المشكلة 3: `Module not found` **الحل:** ```bash rm -rf node_modules package-lock.json npm install ``` ### 🔴 المشكلة 4: API Routes لا تعمل **السبب:** على Vercel تعمل، لكن على Firebase لا. **الحل:** - **Vercel:** لا مشكلة. - **Firebase:** استخدم خدمات خارجية. ### 🔴 المشكلة 5: الصور لا تظهر **السبب:** `unoptimized` مفقود. **الحل:** ```typescript images: { unoptimized: true }, ``` ## جدول المنصات <table> <thead> <tr> <th>المنصة</th> <th>SSR</th> <th>API</th> <th>الثمن</th> </tr> </thead> <tbody> <tr> <td><strong>Vercel</strong></td> <td>✅</td> <td>✅</td> <td>مجاني (Hobby)</td> </tr> <tr> <td><strong>Firebase</strong></td> <td>❌</td> <td>❌</td> <td>مجاني (Spark)</td> </tr> <tr> <td><strong>Netlify</strong></td> <td>✅</td> <td>✅</td> <td>مجاني</td> </tr> <tr> <td><strong>Cloudflare</strong></td> <td>✅</td> <td>✅</td> <td>مجاني</td> </tr> </tbody> </table> ## قائمة تحقق نهائية <table> <thead> <tr> <th>المهمة</th> <th>الحالة</th> </tr> </thead> <tbody> <tr> <td>تحضير المشروع</td> <td>⬜</td> </tr> <tr> <td>رفع على GitHub</td> <td>⬜</td> </tr> <tr> <td>النشر على Vercel</td> <td>⬜</td> </tr> <tr> <td>إضافة متغيرات البيئة</td> <td>⬜</td> </tr> <tr> <td>نطاق مخصص</td> <td>⬜</td> </tr> <tr> <td>التصدير الثابت (اختياري)</td> <td>⬜</td> </tr> <tr> <td>حل التمارين الثمانية</td> <td>⬜</td> </tr> </tbody> </table> ## ماذا بعد هذا المقال؟ الآن بعد أن أتقنت النشر، أنت جاهز للمقال الأخير: 1. **مشروع كامل** — مدونة متكاملة. ## الخلاصة في هذا المقال، تعلمت: - ✅ خيارات النشر. - ✅ النشر على Vercel. - ✅ النشر على Firebase. - ✅ النشر على Netlify. - ✅ التصدير الثابت. - ✅ CI/CD. - ✅ حل 8 تمارين عملية. **تذكر:** النشر هو **الخطوة الأخيرة** — لكنها **الأهم** لتظهر للعالم.