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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ صفحة فارغة)
 
سطر 1: سطر 1:
  
 +
= نشر تطبيقات Next.js =
 +
نستعرض في هذه الصفحة كيفية نشر تطبيقات Next.sj سواء المُدارة managed أو ذاتية الإدارة Self-hosted باستخدام الواجهة البرمجية لبناء التطبيقات.
 +
 +
== الواجهة البرمجية لبناء تطبيقات Next.js ==
 +
يُنتج الأمر نسخة محسَّنة من التطبيق لمرحلة الإنتاج وتتضمن المخرجات المعيارية لهذه العملية:
 +
 +
* ملفات HTML للصفحات باستخدام <code>getStaticProps</code> أو [[Next.js/automatic static optimization|التحسين التدريجي الساكن]].
 +
* ملفات CSS للتنسيق العام أو لتنسيق مجالات محددة.
 +
* شيفرة JavaScript لتصيير المحتوى الديناميكي من خادم Next.js مسبقًا.
 +
* شيفرة JavaScript لتأمين التفاعل من جانب المستخدم باستخدام React.
 +
 +
تُولَّد هذه الملفات داخل المجلد <code>next.</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/css</code>: يضم المجلد جميع ملفات CSS العامة التي تُنسَّق جميع صفحات التطبيق.
 +
* <code>.next/server/pages</code>: يحتوي على المداخل الرئيسي لملفات HTML و JavaScript التي صُيِّرت مسبقًا من قبل الخادم. تُنشأ الملفات عندما تُفعَّل ميزة [[Next.js/output file tracing|تعقّب ملفات الخرج]] Output File Tracing وتتضمن كل مسارات الملفات التي تعتمد على صفحة محددة.
 +
* <code>next/server/chunks.</code>: وتضم قطع JavaScript التي تُستخدم في أماكن مختلفة من التطبيق.
 +
* <code>next/cache.</code>: ويضم مخرجات عملية بناء التخزين المؤقت للصور والاستجابات والصفحات المستقبلة من خادم  Next.js. يساعد التخزين المؤقت على تقليل زمن البناء ويحسن أداء تحميل الصور.
 +
 +
تُصرَّف شيفرة JavaScript بأكملها ضمن المجلد <code>next.</code> وتُصغَّر تجميعاتها لتحقيق أفضل أداء ودعم جميع المتصفحات الحديثة.
 +
 +
== تطبيقات Next.js المُدارة على Vercel ==
 +
تتيح لك منصة [https://vercel.com/?utm_source=github.com&utm_medium=referral&utm_campaign=deployment Vercel] نشر تطبيق Next.js بسرعة دون أية إعدادات، حيث تتعرف المنصة تلقائيًا على تطبيقك وتُنفّذ الأمر <code>next build</code> وتحسّن المخرجات بما في ذلك:
 +
 +
* الإبقاء على موجودات التخزين المؤقت لكامل التوزيعة غن لم يحدث فيها تغيرات.
 +
* التوزيعات النهائية [https://vercel.com/features/previews Immutable deployments] مزوّدة بعنوان لكل نسخة commit.
 +
* تحسين [[Next.js/pages|الصفحات]] الساكنة تلقائيًا إن أمكن.
 +
* ضغط الموجودات (JavaScript، CSS، الصور، خطوط الكتابة) وتقديمها من خلال [https://vercel.com/features/infrastructure شبكة Edge].
 +
* تحسين مسارت API تلقائيًا كدوال وظيفية مُحسّنة مستقلة عن الخادم Serverless Functions يمكن توسيعها إلى ما لانهاية.
 +
* تحسين الأدوات الوسطية تلقائيًا كدوال وظيفية تعتمد الحوسبة الحدية Edge Functions ولا تتعرض لإخفاقات التشغيل وتقلع مباشرة.
 +
 +
يقدم لك أيضًا الميزات التالية:
 +
 +
* المراقبة التلقائية للأداء من خلال [https://vercel.com/analytics Next.js Analytics]
 +
* شهادات  HTTPS و SSL تلقائية.
 +
* الإدارة التلقائية لنظام التكامل المتواصل والنشر المتواصل CICD (من خلال GitHub و GitLab و Bitbucket وغيرها).
 +
* دعم [https://vercel.com/docs/environment-variables متغيرات البيئة].
 +
* دعم [https://vercel.com/docs/custom-domains النطاقات المخصصة].
 +
* دعم تحسين الصور باستخدام المكوّن <code>next/image</code>.
 +
* النشر المباشرة من خلال <code>git push</code>.
 +
 +
== تطبيقات Next.js المدارة ذاتيًا ==
 +
يمكنك إدارة استضافة تطبيقات Next.js بنفسك وبكل الميزات المتاحة عبر Node.js أو Docker، كما يمكنك تصدير ملفات HTML بشكل ساكن لكن [[Next.js/static html export|بوجود بعض التقييدات]].
 +
 +
=== خادم Node.js ===
 +
بإمكانك نشر تطبيقات Next.js على أية استضافة تدعم Node.js مثل [https://aws.amazon.com/ec2/ AWS EC2]  أو [https://www.digitalocean.com/products/droplets/ DigitalOcean Droplet].
 +
 +
تأكد في البداية من وجود الإعدادين <code>"build"</code> و <code>"start"</code> في الملف <code>package.json</code>:<syntaxhighlight lang="json">
 +
{
 +
  "scripts": {
 +
    "dev": "next dev",
 +
    "build": "next build",
 +
    "start": "next start"
 +
  }
 +
}
 +
</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>
 +
 +
== نشر حاوية Docker لتطبيق Next.js ==
 +
بإمكانك نشر تطبيق Next.js على أية استضافة تدعم حاويات [https://www.docker.com/ Docker] وذلك عند نشر مُنسِّق حاويات مثل [https://kubernetes.io/ Kubernetes] أو [https://www.nomadproject.io/ HashiCorp Nomad] أو عندما تُشغّل التطبيق ضمن عقدة واحدة في مزود خدمة سحابية  cloud provider.
 +
 +
# ثبِّت Docker على جهازك.
 +
# انسخ المثال [https://github.com/vercel/next.js/tree/canary/examples/with-docker with-docker].
 +
# نفذ أمر بناء الحاوية <code>docker build -t nextjs-docker</code>.
 +
# شغّل الحاوية <code>docker run -p 3000:3000 nextjs-docker</code>
 +
 +
إن أردت استخدام متغيرات بيئة مختلفة عبر بيئات عمل مختلفة، راجع مثال [https://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env استخدام متغيرات بيئة مختلفة] على GitHub.
 +
 +
== التصدير  الساكن لملفات HTML ==
 +
اتبع التعليمات الواردة في [[Next.js/static html export|توثيق التصدير الساكن لملفات HTML]] إن أردت تصدير هذه الملفات في تطبيق Next.js
 +
 +
== التحديث التلقائي لتطبيقات Next.js ==
 +
عندما تنشر تطبيق Next.js سترغب في رؤية آخر نسخة دون الحاجة إلى إعادة تحميله. لهذا تحمّل Next.js تلقائيًا آخر نسخة من التطبيق في الخلفية أثناء التنقل، وسيعمل المكوّن <code>next/link</code> أثناء التنقل في جانب العميل عمل العنصر <code><a></code> النمطي.
 +
 +
'''ملاحظة''': إن أحضرت صفحة مسبقًا (بنسخة أقدم) بواسطة المكوّن <code>next/link</code> ستستخدم Next.js النسخة الأقدم. وسيسبب الانتقال إلى صفحة لم تُحضر مسبقًا (ولم تُخزّن مؤقتًا في منظومة تسليم محتوى CDN) إلى تحميل النسخة الأخيرة.
 +
 +
== المصادر ==
 +
 +
* الصفحة [https://nextjs.org/docs/deployment Deployment] من توثيق Next.js الرسمي

مراجعة 07:54، 27 مايو 2022

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

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

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

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

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

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

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

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

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

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

  • المراقبة التلقائية للأداء من خلال Next.js Analytics
  • شهادات HTTPS و SSL تلقائية.
  • الإدارة التلقائية لنظام التكامل المتواصل والنشر المتواصل CICD (من خلال 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

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

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

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

المصادر

  • الصفحة Deployment من توثيق Next.js الرسمي
مجلوبة من "https://wiki.hsoub.com/index.php?title=Next.js/deployment&oldid=31912"