الفرق بين المراجعتين لصفحة: «Next.js/deployment»
< Next.js
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:نشر تطبيقات Next.js}}</noinclude> | <noinclude>{{DISPLAYTITLE:نشر تطبيقات Next.js}}</noinclude> | ||
نستعرض في هذه الصفحة كيفية نشر تطبيقات Next. | نستعرض في هذه الصفحة كيفية نشر تطبيقات Next.js سواء المُدارة managed أو ذاتية الإدارة Self-hosted باستخدام الواجهة البرمجية لبناء التطبيقات. | ||
== الواجهة البرمجية لبناء تطبيقات Next.js == | == الواجهة البرمجية لبناء تطبيقات Next.js == | ||
يُنتج الأمر نسخة محسَّنة من التطبيق لمرحلة الإنتاج وتتضمن المخرجات المعيارية لهذه العملية: | يُنتج الأمر <code>next build</code> نسخة محسَّنة من التطبيق لمرحلة الإنتاج وتتضمن المخرجات المعيارية لهذه العملية: | ||
* ملفات HTML للصفحات باستخدام <code>getStaticProps</code> أو [[Next.js/automatic static optimization|التحسين التدريجي الساكن]]. | * ملفات HTML للصفحات باستخدام <code>getStaticProps</code> أو [[Next.js/automatic static optimization|التحسين التدريجي الساكن]]. | ||
| سطر 12: | سطر 12: | ||
تُولَّد هذه الملفات داخل المجلد <code>next.</code>: | تُولَّد هذه الملفات داخل المجلد <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/static/media.</code>: تُنسخ ويجري التحقق من الصّور الموجودة في المجلّد <code>next/image</code> ضمن هذا المجلد. | ||
* <code>.next/static/css</code>: يضم المجلد جميع ملفات CSS العامة التي تُنسَّق جميع صفحات التطبيق. | * <code>.next/static/css</code>: يضم المجلد جميع ملفات CSS العامة التي تُنسَّق جميع صفحات التطبيق. | ||
* <code>.next/server/pages</code>: يحتوي على المداخل | * <code>.next/server/pages</code>: يحتوي على المداخل الرئيسية لملفات HTML و JavaScript التي صُيِّرت مسبقًا من قبل الخادم. تُنشأ الملفات عندما تُفعَّل ميزة [[Next.js/output file tracing|تعقّب ملفات الخرج]] Output File Tracing وتتضمن كل مسارات الملفات التي تعتمد على صفحة محددة. | ||
* <code>next/server/chunks.</code>: وتضم قطع JavaScript التي تُستخدم في أماكن مختلفة من التطبيق. | * <code>next/server/chunks.</code>: وتضم قطع JavaScript التي تُستخدم في أماكن مختلفة من التطبيق. | ||
* <code>next/cache.</code>: ويضم مخرجات عملية بناء التخزين المؤقت للصور والاستجابات والصفحات المستقبلة من خادم | * <code>next/cache.</code>: ويضم مخرجات عملية بناء التخزين المؤقت للصور والاستجابات والصفحات المستقبلة من خادم Next.js. يساعد التخزين المؤقت على تقليل زمن البناء ويحسن أداء تحميل الصور. | ||
تُصرَّف شيفرة JavaScript بأكملها ضمن المجلد <code>next.</code> وتُصغَّر تجميعاتها لتحقيق أفضل أداء ودعم | تُصرَّف شيفرة JavaScript بأكملها ضمن المجلد <code>next.</code> وتُصغَّر تجميعاتها لتحقيق أفضل أداء ودعم لجميع المتصفحات الحديثة. | ||
== تطبيقات Next.js المُدارة على Vercel == | == تطبيقات 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/?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. | * التوزيعات النهائية [https://vercel.com/features/previews Immutable deployments] مزوّدة بعنوان لكل نسخة commit. | ||
* تحسين [[Next.js/pages|الصفحات]] الساكنة تلقائيًا إن أمكن. | * تحسين [[Next.js/pages|الصفحات]] الساكنة تلقائيًا إن أمكن. | ||
| سطر 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> ضمن مجلد مشروعك. قد | </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 == | == نشر حاوية Docker لتطبيق Next.js == | ||
بإمكانك نشر تطبيق Next.js على أية استضافة تدعم حاويات [https://www.docker.com/ Docker] وذلك عند نشر مُنسِّق حاويات مثل [https://kubernetes.io/ Kubernetes] أو [https://www.nomadproject.io/ HashiCorp Nomad] أو عندما تُشغّل التطبيق ضمن عقدة واحدة في مزود خدمة سحابية | بإمكانك نشر تطبيق Next.js على أية استضافة تدعم حاويات [https://www.docker.com/ Docker] وذلك عند نشر مُنسِّق حاويات مثل [https://kubernetes.io/ Kubernetes] أو [https://www.nomadproject.io/ HashiCorp Nomad] أو عندما تُشغّل التطبيق ضمن عقدة واحدة في مزود خدمة سحابية cloud provider. | ||
# ثبِّت Docker على جهازك. | # ثبِّت Docker على جهازك. | ||
| سطر 67: | سطر 67: | ||
إن أردت استخدام متغيرات بيئة مختلفة عبر بيئات عمل مختلفة، راجع مثال [https://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env استخدام متغيرات بيئة مختلفة] على GitHub. | إن أردت استخدام متغيرات بيئة مختلفة عبر بيئات عمل مختلفة، راجع مثال [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/static html export|توثيق التصدير الساكن لملفات HTML]] إن أردت تصدير هذه الملفات في تطبيق Next.js | ||
== التحديث التلقائي لتطبيقات Next.js == | == التحديث التلقائي لتطبيقات 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 الرسمي | * الصفحة [https://nextjs.org/docs/deployment Deployment] من توثيق Next.js الرسمي | ||
مراجعة 14:41، 1 يونيو 2022
نستعرض في هذه الصفحة كيفية نشر تطبيقات Next.js سواء المُدارة managed أو ذاتية الإدارة Self-hosted باستخدام الواجهة البرمجية لبناء التطبيقات.
الواجهة البرمجية لبناء تطبيقات Next.js
يُنتج الأمر 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 التي صُيِّرت مسبقًا من قبل الخادم. تُنشأ الملفات عندما تُفعَّل ميزة تعقّب ملفات الخرج 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.
- ثبِّت Docker على جهازك.
- انسخ المثال with-docker.
- نفذ أمر بناء الحاوية
docker build -t nextjs-docker. - شغّل الحاوية
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 الرسمي