مراجعة 20:54، 21 نوفمبر 2022

نستعرض في هذه الصفحة كيفية نشر تطبيقات 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.

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

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

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

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

خدمات أخرى

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

خادم مدار Managed Server

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

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

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

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

Serverless

ملاحظة: لا يدعم كل مزودي خدمات 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 الرسمي

@@ سطر 2: / سطر 2: @@
 نستعرض في هذه الصفحة كيفية نشر تطبيقات Next.js سواء المُدارة managed أو ذاتية الإدارة Self-hosted باستخدام الواجهة البرمجية لبناء التطبيقات.
-== الواجهة البرمجية لبناء تطبيقات Next.js ==
+== الواجهة البرمجية لبناء التطبيقات Build API ==
 يُنتج الأمر <code>next build</code> نسخة محسَّنة من التطبيق لمرحلة الإنتاج وتتضمن المخرجات المعيارية لهذه العملية:
 * ملفات HTML للصفحات باستخدام <code>getStaticProps</code> أو [[Next.js/automatic static optimization|التحسين التدريجي الساكن]].
-* ملفات CSS للتنسيق العام أو لتنسيق مجالات محددة.
+* ملفات CSS للتنسيق العام أو الخاص المقيد بمكونات أو صفحات محددة.
 * شيفرة JavaScript لتصيير المحتوى الديناميكي من خادم Next.js مسبقًا.
 * شيفرة JavaScript لتأمين التفاعل من جانب المستخدم باستخدام React.
@@ سطر 12: / سطر 12: @@
 تُولَّد هذه الملفات داخل المجلد <code>next.</code>:
-* <code>next/static/chunks/pages.</code>: يرتبط كل ملف في هذا المجلد بوجهة لها نفس الاسم. إذ سيُحمَّل الملف <code>.next/static/chunks/pages/about.js</code> مثلًا عندما تستعرض الوجهة <code>about/</code> في تطبيقك.
+* <code>next/static/chunks/pages.</code>: يرتبط كل ملف في هذا المجلد بوجهة لها نفس الاسم. إذ سيُحمَّل الملف <code>next/static/chunks/pages/about.js.</code> مثلًا عندما تستعرض الوجهة <code>about/</code> في تطبيقك.
-* <code>next/static/media.</code>: تُنسخ ويجري التحقق من الصّور الموجودة في المجلّد <code>next/image</code> ضمن هذا المجلد.
+* <code>next/static/media.</code>: يحوي الصور المستوردة الساكنة عبر <code>next/image</code> ضمن هذا المجلد.
-* <code>.next/static/css</code>: يضم المجلد جميع ملفات CSS العامة التي تُنسَّق جميع صفحات التطبيق.
+* <code>next/static/css.</code>: يضم المجلد جميع ملفات [[CSS]] العامة التي تُنسَّق جميع صفحات التطبيق.
-* <code>.next/server/pages</code>: يحتوي على المداخل الرئيسية لملفات HTML و JavaScript التي صُيِّرت مسبقًا من قبل الخادم. تُنشأ الملفات عندما تُفعَّل ميزة [[Next.js/output file tracing|تعقّب ملفات الخرج]] Output File Tracing وتتضمن كل مسارات الملفات التي تعتمد على صفحة محددة.
+* <code>next/server/pages.</code>: يحتوي على المداخل الرئيسية لملفات HTML و JavaScript التي صُيِّرت مسبقًا من قبل الخادم. تُنشأ الملفات <code>nft.json.</code> عندما تُفعَّل ميزة [[Next.js/output file tracing|تعقّب ملفات الخرج]] Output File Tracing وتتضمن كل مسارات الملفات التي تعتمد على صفحة محددة.
 * <code>next/server/chunks.</code>: وتضم قطع JavaScript التي تُستخدم في أماكن مختلفة من التطبيق.
 * <code>next/cache.</code>: ويضم مخرجات عملية بناء التخزين المؤقت للصور والاستجابات والصفحات المستقبلة من خادم Next.js. يساعد التخزين المؤقت على تقليل زمن البناء ويحسن أداء تحميل الصور.
-تُصرَّف شيفرة JavaScript بأكملها ضمن المجلد <code>next.</code> وتُصغَّر تجميعاتها لتحقيق أفضل أداء ودعم لجميع المتصفحات الحديثة.
+تُصرَّف شيفرة JavaScript بأكملها ضمن المجلد <code>next.</code> وتُصغَّر تجميعاتها لتحقيق أفضل أداء و<nowiki/>[[Next.js/supported browsers features|دعم لجميع المتصفحات الحديثة]].
 == تطبيقات Next.js المُدارة على Vercel ==
 تتيح لك منصة [https://vercel.com/?utm_source=github.com&utm_medium=referral&utm_campaign=deployment Vercel] نشر تطبيق Next.js بسرعة دون أية إعدادات، إذ تتعرف المنصة تلقائيًا على تطبيقك وتُنفّذ الأمر <code>next build</code> وتحسّن المخرجات بما في ذلك:
-* الإبقاء على موجودات التخزين المؤقت لكامل التوزيعة إن لم يحدث فيها تغيرات.
+* الإبقاء على أصول المخزنة مؤقتًا cached assets لكامل التوزيعة إن لم يحدث فيها تغيرات.
 * التوزيعات النهائية [https://vercel.com/features/previews Immutable deployments] مزوّدة بعنوان لكل نسخة commit.
 * تحسين [[Next.js/pages|الصفحات]] الساكنة تلقائيًا إن أمكن.
-* ضغط الموجودات (JavaScript، CSS، الصور، خطوط الكتابة) وتقديمها من خلال [https://vercel.com/features/infrastructure شبكة Edge].
+* ضغط الأصول (JavaScript، CSS، الصور، خطوط الكتابة) وتقديمها من خلال [https://vercel.com/features/infrastructure شبكة Edge].
 * تحسين مسارت API تلقائيًا كدوال وظيفية مُحسّنة مستقلة عن الخادم Serverless Functions يمكن توسيعها إلى ما لانهاية.
-* تحسين الأدوات الوسطية تلقائيًا كدوال وظيفية تعتمد الحوسبة الحدية Edge Functions ولا تتعرض لإخفاقات التشغيل وتقلع مباشرة.
+* تحسين الأدوات الوسطية Middleware تلقائيًا كدوال وظيفية تعتمد الحوسبة الحدية Edge Functions ولا تتعرض لإخفاقات التشغيل وتقلع مباشرة.
 يقدم لك أيضًا الميزات التالية:
@@ سطر 35: / سطر 35: @@
 * المراقبة التلقائية للأداء من خلال [https://vercel.com/analytics Next.js Analytics]
 * شهادات HTTPS و SSL تلقائية.
-* الإدارة التلقائية لنظام التكامل المتواصل والنشر المتواصل CICD (من خلال GitHub و GitLab و Bitbucket وغيرها).
+* الإدارة التلقائية لنظام التكامل المتواصل والنشر المتواصل CI/CD (من خلال GitHub و GitLab و Bitbucket وغيرها).
 * دعم [https://vercel.com/docs/environment-variables متغيرات البيئة].
 * دعم [https://vercel.com/docs/custom-domains النطاقات المخصصة].
@@ سطر 42: / سطر 42: @@
 == تطبيقات Next.js المدارة ذاتيًا ==
-يمكنك إدارة استضافة تطبيقات Next.js بنفسك وبكل الميزات المتاحة عبر Node.js أو Docker، كما يمكنك تصدير ملفات HTML بشكل ساكن لكن [[Next.js/static html export|بوجود بعض التقييدات]].
+يمكنك إدارة استضافة تطبيقات Next.js بنفسك وبكل الميزات المتاحة عبر [[Node.js]] أو Docker، كما يمكنك تصدير ملفات HTML بشكل ساكن لكن [[Next.js/static html export|بوجود بعض التقييدات]].
 === خادم Node.js ===
@@ سطر 55: / سطر 55: @@
    }
 }
-</syntaxhighlight>نفّذ بعد ذلك الأمر <code>next build</code> لبناء التطبيق ثم نفّذ أخيرًا الأمر <code>next start</code> لتشغيل خادم Node.js الذي يدعم جميع ميزات Next.js.<blockquote>'''ملاحظة''': فكّر باستخدام <code>sharp</code> إن كنت ستستخدم المكوّن <code>next/image</code> لأداء أفضل في تحسين الصورة في بيئة الإنتاج وذلك بتنفيذ الأمر <code>npm install sharp</code> ضمن مجلد مشروعك. قد يحتاج <code>sharp</code> في بيئة Linux [https://sharp.pixelplumbing.com/install#linux-memory-allocator تهيئة إضافية] لمنع الاستخدام الزائد للذاكرة.</blockquote>
+</syntaxhighlight>نفّذ بعد ذلك الأمر <code>next build</code> لبناء التطبيق ثم نفّذ أخيرًا الأمر <code>next start</code> لتشغيل خادم Node.js الذي يدعم جميع ميزات Next.js.<blockquote>'''ملاحظة''': فكّر باستخدام <code>sharp</code> إن كنت ستستخدم المكوّن <code>next/image</code> لأداء أفضل في [[Next.js/image optimization|تحسين الصورة]] في بيئة الإنتاج وذلك بتنفيذ الأمر <code>npm install sharp</code> ضمن مجلد مشروعك. قد يحتاج <code>sharp</code> في بيئة لينكس Linux [https://sharp.pixelplumbing.com/install#linux-memory-allocator تهيئة إضافية] لمنع الاستخدام الزائد للذاكرة.</blockquote>
 == نشر حاوية Docker لتطبيق Next.js ==
@@ سطر 68: / سطر 68: @@
 == التصدير الساكن لملفات HTML ==
-اتبع التعليمات الواردة في [[Next.js/static html export|توثيق التصدير الساكن لملفات HTML]] إن أردت تصدير هذه الملفات في تطبيق Next.js
+اتبع التعليمات الواردة في [[Next.js/static html export|توثيق التصدير الساكن لملفات HTML]] إن أردت تصدير هذه الملفات في تطبيق Next.js.
+= خدمات أخرى =
+تدعم خدمات النشر التالية الإصدار 12 من Next.js وما بعد.
+=== خادم مدار  Managed Server ===
+* [https://aws.github.io/copilot-cli/ AWS Copilot]
+* [https://docs.digitalocean.com/tutorials/app-nextjs-deploy/ Digital Ocean App Platform]
+* [https://github.com/vercel/next.js/tree/canary/examples/with-docker Google Cloud Run]
+* [https://elements.heroku.com/buildpacks/mars/heroku-nextjs Heroku]
+* [https://railway.app/new/starters/nextjs-prisma Railway]
+* [https://render.com/docs/deploy-nextjs-app Render]
+<blockquote>'''ملاحظة''': هنالك أيضًا منصات مُدارة تسمح لك باستخدام ملف Dockerfile كما وضحنا في المثال أعلاه.</blockquote>
+=== النشر الساكن static ===
+تدعم الخدمات التالية نشر تطبيقات Next.js الساكنة المصدرة عبر الأمر <code>next export</code>:
+* [https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/ Cloudflare Pages]
+* [https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting Firebase]
+* [https://github.com/vercel/next.js/tree/canary/examples/github-pages GitHub Pages]
+يمكن أن تنشر تطبيق Next.js المصدر عبر الأمر next export يدويًا على أي مزود استضافة ساكن، والذي يكون غالبًا عبر عمليات التكامل المتواصل والنشر المتواصل CI/CD مثل GitHub Actions أو Jenkins أو AWS CodeBuild أو Circle CI أو Azure PIpelines وغيرها.
+=== Serverless ===
+* [https://github.com/serverless-nextjs/serverless-next.js AWS Serverless]
+* [https://learn.microsoft.com/en-us/azure/static-web-apps/nextjs Azure Static Web Apps]
+* [https://github.com/milliHQ/terraform-aws-next-js Terraform]
+* [https://docs.netlify.com/integrations/frameworks/next-js Netlify]
+<blockquote>'''ملاحظة''': لا يدعم كل مزودي خدمات serverless استعمال واجهة البناء build API بدءًا من الأمر <code>next start</code>، لذا تأكد من المزود أولًا لمعرفة الدعم المتوفر.</blockquote>
 == التحديث التلقائي لتطبيقات Next.js ==
 عندما تنشر تطبيق Next.js سترغب في رؤية آخر نسخة دون الحاجة إلى إعادة تحميلها. لهذا تحمّل Next.js تلقائيًا آخر نسخة من التطبيق في الخلفية أثناء التنقل، وسيعمل المكوّن <code>next/link</code> أثناء التنقل في جانب العميل عمل العنصر <code><a></code> النمطي.
-'''ملاحظة''': إن أحضرت صفحة مسبقًا (نسختها أقدم) بواسطة المكوّن <code>next/link</code> ستستخدم Next.js النسخة الأقدم. وسيسبب الانتقال إلى صفحة لم تُحضر مسبقًا (ولم تُخزّن مؤقتًا في منظومة تسليم محتوى CDN) إلى تحميل النسخة الأخيرة.
+'''ملاحظة''': إن أُحضِرَت صفحة مسبقًا (نسختها أقدم) بواسطة المكوّن <code>next/link</code> ستستخدم Next.js النسخة الأقدم. وسيسبب الانتقال إلى صفحة لم تُحضر مسبقًا (ولم تُخزّن مؤقتًا في منظومة تسليم محتوى CDN) إلى تحميل النسخة الأخيرة.
+== تنفيذ عمليات يدويًا عند إغلاق التطبيق ==
+قد تضطر أحيانًا إلى إجراء بعض عمليات التنظيف والحذف عند إغلاق التطبيق أو إيقافه أي عبر إشارات المعالجة <code>SIGTERM</code> أو <code>SIGINT</code>، ويمكنك فعل ذلك عبر ضبط قيمة متغير البيئة <code>NEXT_MANUAL_SIG_HANDLE</code> إلى القيمة <code>true</code> ثم إضافة المعالج المخصص لأي إشارة منهما داخل الملف <code>document.js_</code> كما بالشكل التالي:<syntaxhighlight lang="javascript">
+// 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)
+  })
+}
+</syntaxhighlight>
 == المصادر ==
 * الصفحة [https://nextjs.org/docs/deployment Deployment] من توثيق Next.js الرسمي

الفرق بين المراجعتين ل"Next.js/deployment"