النشر

تهانينا! أنت هنا لأنك جاهز لنشر تطبيق Next.js الخاص بك. هذه الصفحة سوف توضح كيفية النشر سواءً كان مُدارًا أو مستضافًا ذاتيًا باستخدام واجهة برمجة تطبيقات بناء Next.js.

واجهة برمجة تطبيقات بناء Next.js

next build يولد نسخة مُحسنة من تطبيقك للإنتاج. هذا الإخراج القياسي يتضمن:

• ملفات HTML للصفحات التي تستخدم getStaticProps أو التحسين الثابت التلقائي
• ملفات CSS للأنماط العامة أو الأنماط ذات النطاق الفردي
• جافاسكريبت لتقديم المحتوى الديناميكي مسبقًا من خادم Next.js
• جافاسكريبت للتفاعلية على جانب العميل عبر React

يتم توليد هذا الإخراج داخل مجلد .next:

• .next/static/chunks/pages – كل ملف جافاسكريبت داخل هذا المجلد يرتبط بالمسار بنفس الاسم. على سبيل المثال، .next/static/chunks/pages/about.js سيكون ملف الجافاسكريبت الذي يتم تحميله عند عرض مسار /about في تطبيقك
• .next/static/media – الصور المستوردة ثابتًا من next/image يتم تجزئتها ونسخها هنا
• .next/static/css – ملفات CSS العامة لجميع الصفحات في تطبيقك
• .next/server/pages – نقاط دخول HTML و JavaScript المقدمة مسبقًا من الخادم. ملفات .nft.json يتم إنشاؤها عند تمكين تتبع ملف الإخراج وتحتوي على جميع مسارات الملفات التي تعتمد على صفحة معينة.
• .next/server/chunks – أجزاء جافاسكريبت المشتركة المستخدمة في أماكن متعددة عبر تطبيقك
• .next/cache – إخراج لذاكرة التخزين المؤقت للبناء والصور المخزنة، والاستجابات، والصفحات من خادم Next.js. استخدام ذاكرة التخزين المؤقت يساعد في تقليل أوقات البناء وتحسين أداء تحميل الصور

جميع أكواد جافاسكريبت داخل .next تم تجميعها وحزم المتصفح تم تصغيرها للمساعدة في تحقيق أفضل أداء ودعم جميع المتصفحات الحديثة.

Next.js المُدار مع Vercel

Vercel هي أسرع طريقة لنشر تطبيق Next.js الخاص بك بدون أي تكوين.

عند النشر على Vercel، المنصة تكتشف Next.js تلقائيًا، وتشغل next build، وتحسن إخراج البناء لك، بما في ذلك:

• الحفاظ على الأصول المخزنة مؤقتًا عبر عمليات النشر إذا لم تتغير
• عمليات نشر غير قابلة للتغيير مع عنوان URL فريد لكل commit
• الصفحات يتم تحسينها تلقائيًا بشكل ثابت، إذا أمكن
• الأصول (جافاسكريبت، CSS، الصور، الخطوط) يتم ضغطها وتقديمها من شبكة الحافة العالمية
• مسارات API يتم تحسينها تلقائيًا كـ وظائف بدون خادم معزولة يمكنها التوسع بلا حدود
• البرمجية الوسيطة يتم تحسينها تلقائيًا كـ وظائف حافة ليس لها بدايات باردة وتعمل على الفور

بالإضافة إلى ذلك، توفر Vercel ميزات مثل:

• مراقبة الأداء التلقائية مع Next.js Speed Insights
• HTTPS وشهادات SSL التلقائية
• CI/CD التلقائي (عبر GitHub، GitLab، Bitbucket، إلخ.)
• دعم متغيرات البيئة
• دعم النطاقات المخصصة
• دعم تحسين الصور مع next/image
• عمليات نشر عالمية فورية عبر git push

انشر تطبيق Next.js على Vercel مجانًا لتجربته.

الاستضافة الذاتية

يمكنك استضافة Next.js ذاتيًا مع دعم جميع الميزات باستخدام Node.js أو Docker. يمكنك أيضًا تصدير HTML ثابت، والذي له بعض القيود.

خادم Node.js

يمكن نشر Next.js على أي مزود استضافة يدعم Node.js. على سبيل المثال، AWS EC2 أو DigitalOcean Droplet.

أولاً، تأكد من أن ملف package.json يحتوي على نصوص "build" و "start":

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

ثم، شغل npm run build لبناء تطبيقك. أخيرًا، شغل npm run start لبدء خادم Node.js. هذا الخادم يدعم جميع ميزات Next.js.

إذا كنت تستخدم next/image، فكر في إضافة sharp لـ تحسين الصور بأداء أفضل في بيئة الإنتاج عن طريق تشغيل npm install sharp في دليل مشروعك. على منصات لينكس، قد يحتاج sharp إلى تكوين إضافي لمنع استخدام الذاكرة المفرط.

صورة Docker

يمكن نشر Next.js على أي مزود استضافة يدعم حاويات Docker. يمكنك استخدام هذا الأسلوب عند النشر على منسقات الحاويات مثل Kubernetes أو HashiCorp Nomad، أو عند التشغيل داخل عقدة واحدة في أي مزود سحابي.

1. ثبت Docker على جهازك
2. استنسخ مثال with-docker
3. ابن حاويتك: docker build -t nextjs-docker .
4. شغل حاويتك: docker run -p 3000:3000 nextjs-docker

إذا كنت بحاجة إلى استخدام متغيرات بيئة مختلفة عبر بيئات متعددة، تحقق من مثالنا with-docker-multi-env.

تصدير HTML ثابت

إذا كنت ترغب في تصدير HTML ثابت لتطبيق Next.js الخاص بك، اتبع الإرشادات في توثيق تصدير HTML الثابت.

خدمات أخرى

الخدمات التالية تدعم Next.js v12+. أدناه، ستجد أمثلة أو أدلة لنشر Next.js على كل خدمة.

خادم مُدار

• AWS Copilot
• منصة تطبيقات Digital Ocean
• Google Cloud Run
• Heroku
• Railway
• Render

من الجيد معرفة: هناك أيضًا منصات مُدارة تسمح لك باستخدام Dockerfile كما هو موضح في المثال أعلاه.

ثابت فقط

الخدمات التالية تدعم نشر Next.js فقط باستخدام output: 'export'.

• GitHub Pages

يمكنك أيضًا نشر الإخراج من output: 'export' يدويًا على أي مزود استضافة ثابت، غالبًا عبر خط أنابيب CI/CD الخاص بك مثل GitHub Actions، Jenkins، AWS CodeBuild، Circle CI، Azure Pipelines، وغيرها.

بدون خادم

• AWS Amplify
• Azure Static Web Apps
• Cloudflare Pages
• Firebase
• Netlify
• Terraform
• SST

من الجيد معرفة: ليس كل مزودي الخدمات بدون خادم ينفذون واجهة برمجة تطبيقات بناء Next.js من next start. يرجى التحقق مع المزود لمعرفة الميزات المدعومة.

التحديثات التلقائية

عند نشر تطبيق Next.js الخاص بك، تريد رؤية أحدث إصدار دون الحاجة إلى إعادة التحميل.

سيقوم Next.js بتحميل أحدث إصدار من تطبيقك تلقائيًا في الخلفية عند التوجيه. بالنسبة للتنقلات من جانب العميل، سيعمل next/link مؤقتًا كعلامة <a> عادية.

من الجيد معرفة: إذا تم جلب صفحة جديدة (بإصدار قديم) مسبقًا بواسطة next/link، فسيستخدم Next.js الإصدار القديم. التنقل إلى صفحة لم يتم جلبها مسبقًا (ولم يتم تخزينها مؤقتًا على مستوى CDN) سيقوم بتحميل أحدث إصدار.

إيقاف التشغيل اليدوي المهذب

عند الاستضافة الذاتية، قد ترغب في تشغيل كود عند إيقاف الخادم على إشارات SIGTERM أو SIGINT.

يمكنك تعيين متغير البيئة NEXT_MANUAL_SIG_HANDLE إلى true ثم تسجيل معالج لتلك الإشارة داخل ملف _document.js الخاص بك. ستحتاج إلى تسجيل متغير البيئة مباشرة في نص package.json، وليس في ملف .env.

من الجيد معرفة: معالجة الإشارات اليدوية غير متاحة في next dev.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
  }
}

if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  // يجب إضافة هذا في _document المخصص الخاص بك
  process.on('SIGTERM', () => {
    console.log('تم استقبال SIGTERM: ', 'تنظيف')
    process.exit(0)
  })

  process.on('SIGINT', () => {
    console.log('تم استقبال SIGINT: ', 'تنظيف')
    process.exit(0)
  })
}