نشر Next.js

انشر
Next.js static export

صدّر تطبيق Next.js إلى HTML وأصول ثابتة، ارفع مجلد out، وانشره عالميًا دون تشغيل خادم Node.js.

راجع دليل الإعداد
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// Optional for static deployments
images: { unoptimized: true },
}

module.exports = nextConfig
تم تفعيل التصدير الثابت

مصفوفة دعم static export

قبل رفع out، تأكد أن التطبيق يناسب نموذج التصدير الثابت.

مناسب

  • مسارات ثابتة تُنشأ أثناء البناء
  • صفحات App Router قابلة للتوليد الثابت
  • Pages Router مع getStaticProps / getStaticPaths
  • جلب البيانات من المتصفح بعد التحميل
  • next/link والاستيراد الديناميكي وCSS Modules والأصول الثابتة

يتطلب بيئة تشغيل أخرى

  • مسارات API ومعالجات routes التي تحتاج تنفيذًا على الخادم
  • Middleware وإعادة الكتابة والتحويلات والترويسات المخصصة
  • getServerSideProps والتصيير وقت الطلب
  • Incremental Static Regeneration
  • تحسين next/image الافتراضي دون استراتيجية ثابتة مخصصة

استخدم Next.js عندما تريد الإطار لا الخادم

احتفظ بالإطار واترك بيئة تشغيل الخادم

يتيح Next.js static export الاحتفاظ بالتوجيه المبني على الملفات، والتخطيطات، والبيانات الوصفية، والتصيير وقت البناء، ودعم CSS، وReact في المتصفح عند الحاجة.

الناتج في النهاية مجرد ملفات ثابتة، لذلك يناسب مواقع التسويق والتوثيق ومعارض الأعمال وصفحات المنتجات ومحاور المحتوى التي يمكن تجهيزها وقت البناء.

سريع مثل الأصل الثابت

يمكن تخزين HTML المسبق التصيير وتقديمه مباشرة دون انتظار خادم render.

تشغيل أبسط

غياب بيئة تشغيل Node يعني أجزاء أقل ومخرجات نشر أوضح وانحرافًا أقل بين البناء والإنتاج.

حد واضح لبيئة التشغيل

إذا احتاجت الصفحة كود خادم فلا تُجبرها على static export. وإذا كان يمكن تجهيزها وقت البناء، فمجلد out مخرج نظيف للنشر.

عوائق شائعة في static export

Blocker 01

يفشل البناء بسبب ميزات خادم

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

Blocker 02

الصور تعمل في dev وتفشل بعد التصدير

محسن next/image الافتراضي يتوقع خادمًا. استخدم images.unoptimized أو loader مخصصًا أو صورًا ثابتة عادية.

Blocker 03

المسارات الديناميكية مفقودة

ولّد قائمة المسارات وقت البناء عبر generateStaticParams في App Router أو getStaticPaths في Pages Router.

Blocker 04

redirects أو rewrites لا تطبق

تحويلات Next.js ليست جزءًا من static export. استخدم بنية صفحات ثابتة أو تنقلًا من العميل أو تحويلات المنصة عندما تتوفر.

قائمة نشر Next.js static export

01

اضبط output: 'export'

اجعل Next.js ينتج HTML ثابتًا وقت البناء بدل توقع next start أو بيئة تشغيل Node مستضافة.

output: 'export'
02

ابنِ وتحقق من /out

شغّل بناء الإنتاج وتأكد أن مجلد out يحتوي الصفحات والأصول وصفحة 404 والملفات التي ستنشرها.

npm run build
03

ارفع واختبر المسارات

ارفع مجلد out، ثم تحقق من المسارات الداخلية والأصول والصور غير المحسنة في الموقع المنشور.

أسئلة عن نشر Next.js

لماذا يفشل Next Image بعد التصدير؟

مسار تحسين الصور الافتراضي يتوقع خادمًا. في static export اضبط images.unoptimized على true داخل next.config.js.

هل تعمل API routes أو getServerSideProps هنا؟

لا. static export يزيل ميزات بيئة التشغيل مثل API routes وmiddleware وgetServerSideProps. انقل هذا المنطق إلى واجهة خلفية أو خدمة serverless منفصلة.

هل يمكن استخدام App Router؟

نعم، طالما يمكن تصيير المسار ثابتًا ولا يعتمد على APIs خادم ديناميكية مثل headers أو cookies.

كيف أتعامل مع المحتوى الديناميكي؟

اجلبه وقت البناء عندما يمكن ذلك، أو حمّله من العميل بعد hydration. يناسب static export الصفحات التي يمكن تجهيز HTML لها مسبقًا.

هل أرفع .next أم out؟

ارفع out عند استخدام output: export. مجلد .next داخلي لـ Next.js وليس مخرج التصدير الثابت الذي تريد نشره.

هل هذا بديل كامل لاستضافة Next.js على Vercel؟

هو مناسب للتصدير الثابت، وليس لكل تطبيق Next.js. إذا كنت تعتمد على SSR أو middleware أو ISR أو server actions أو API routes فأنت تحتاج بيئة تشغيل تدعمها.