نشر تطبيقات Next.js

نستعرض في هذه الصفحة كيفية نشر تطبيقات Next.js سواء المُدارة managed أو ذاتية الإدارة Self-hosted باستخدام الواجهة البرمجية لبناء التطبيقات.

الواجهة البرمجية لبناء التطبيقات Build API

يُنتج الأمر next build نسخة محسَّنة من التطبيق لمرحلة الإنتاج وتتضمن المخرجات المعيارية لهذه العملية:

• ملفات HTML للصفحات باستخدام getStaticProps أو التحسين التدريجي الساكن.
• ملفات CSS للتنسيق العام أو الخاص المقيد بمكونات أو صفحات محددة.
• شيفرة JavaScript لتصيير المحتوى الديناميكي من خادم Next.js مسبقًا.
• شيفرة JavaScript لتأمين التفاعل من جانب المستخدم باستخدام 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. عندما تُفعَّل ميزة تعقّب ملفات الخرج Output File Tracing وتتضمن كل مسارات الملفات التي تعتمد على صفحة محددة.
• next/server/chunks.: وتضم قطع JavaScript التي تُستخدم في أماكن مختلفة من التطبيق.
• next/cache.: ويضم مخرجات عملية بناء التخزين المؤقت للصور والاستجابات والصفحات المستقبلة من خادم Next.js. يساعد التخزين المؤقت على تقليل زمن البناء ويحسن أداء تحميل الصور.

تُصرَّف شيفرة JavaScript بأكملها ضمن المجلد next. وتُصغَّر تجميعاتها لتحقيق أفضل أداء ودعم لجميع المتصفحات الحديثة.

تطبيقات Next.js المُدارة على Vercel

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

• الإبقاء على أصول المخزنة مؤقتًا cached assets لكامل التوزيعة إن لم يحدث فيها تغيرات.
• التوزيعات النهائية Immutable deployments مزوّدة بعنوان لكل نسخة commit.
• تحسين الصفحات الساكنة تلقائيًا إن أمكن.
• ضغط الأصول (JavaScript، CSS، الصور، خطوط الكتابة) وتقديمها من خلال شبكة Edge.
• تحسين مسارت API تلقائيًا كدوال وظيفية مُحسّنة مستقلة عن الخادم Serverless Functions يمكن توسيعها إلى ما لانهاية.
• تحسين الأدوات الوسطية Middleware تلقائيًا كدوال وظيفية تعتمد الحوسبة المتقدمة Edge Functions ولا تتعرض لإخفاقات التشغيل وتقلع مباشرة.

يقدم لك أيضًا الميزات التالية:

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

تطبيقات Next.js المدارة ذاتيًا

يمكنك إدارة استضافة تطبيقات Next.js بنفسك وبكل الميزات المتاحة عبر Node.js أو Docker، كما يمكنك تصدير ملفات HTML بشكل ساكن لكن بوجود بعض التقييدات.

خادم Node.js

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

تأكد في البداية من وجود الإعدادين "build" و "start" في الملف package.json:

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

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

ملاحظة: فكّر باستخدام sharp إن كنت ستستخدم المكوّن next/image لأداء أفضل في تحسين الصورة في بيئة الإنتاج وذلك بتنفيذ الأمر npm install sharp ضمن مجلد مشروعك. قد يحتاج sharp في بيئة لينكس Linux تهيئة إضافية لمنع الاستخدام الزائد للذاكرة.

نشر حاوية Docker لتطبيق Next.js

بإمكانك نشر تطبيق Next.js على أية استضافة تدعم حاويات Docker وذلك عند نشر مُنسِّق حاويات مثل Kubernetes أو HashiCorp Nomad أو عندما تُشغّل التطبيق ضمن عقدة واحدة في مزود خدمة سحابية cloud provider.

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

إن أردت استخدام متغيرات بيئة مختلفة عبر بيئات عمل مختلفة، راجع مثال استخدام متغيرات بيئة مختلفة على GitHub.

التصدير الساكن لملفات HTML

اتبع التعليمات الواردة في توثيق التصدير الساكن لملفات HTML إن أردت تصدير هذه الملفات في تطبيق Next.js.

خدمات أخرى

تدعم خدمات النشر التالية الإصدار 12 من Next.js وما بعد.

خادم مدار Managed Server

• AWS Copilot
• Digital Ocean App Platform
• Google Cloud Run
• Heroku
• Railway
• Render

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

النشر الساكن static

تدعم الخدمات التالية نشر تطبيقات Next.js الساكنة المصدرة عبر الأمر next export:

• Cloudflare Pages
• Firebase
• GitHub Pages

يمكن أن تنشر تطبيق Next.js المصدر عبر الأمر next export يدويًا على أي مزود استضافة ساكن، والذي يكون غالبًا عبر عمليات التكامل المتواصل والنشر المتواصل CI/CD مثل GitHub Actions أو Jenkins أو AWS CodeBuild أو Circle CI أو Azure PIpelines وغيرها.

Serverless

• AWS Serverless
• Azure Static Web Apps
• Terraform
• Netlify

ملاحظة: لا يدعم كل مزودي خدمات serverless استعمال واجهة البناء build API بدءًا من الأمر next start، لذا تأكد من المزود أولًا لمعرفة الدعم المتوفر.

التحديث التلقائي لتطبيقات Next.js

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

ملاحظة: إن أُحضِرَت صفحة مسبقًا (نسختها أقدم) بواسطة المكوّن next/link ستستخدم Next.js النسخة الأقدم. وسيسبب الانتقال إلى صفحة لم تُحضر مسبقًا (ولم تُخزّن مؤقتًا في منظومة تسليم محتوى CDN) إلى تحميل النسخة الأخيرة.

تنفيذ عمليات يدويًا عند إغلاق التطبيق

قد تضطر أحيانًا إلى إجراء بعض عمليات التنظيف والحذف عند إغلاق التطبيق أو إيقافه أي عبر إشارات المعالجة SIGTERM أو SIGINT، ويمكنك فعل ذلك عبر ضبط قيمة متغير البيئة NEXT_MANUAL_SIG_HANDLE إلى القيمة true ثم إضافة المعالج المخصص لأي إشارة منهما داخل الملف document.js_ كما بالشكل التالي:

// pages/_document.js

if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  // this should be added in your custom _document
  process.on('SIGTERM', () => {
    console.log('Received SIGTERM: ', 'cleaning up')
    process.exit(0)
  })

  process.on('SIGINT', () => {
    console.log('Received SIGINT: ', 'cleaning up')
    process.exit(0)
  })
}

المصادر

• الصفحة Deployment من توثيق Next.js الرسمي