الفرق بين المراجعتين لصفحة: «Next.js/deployment»
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 22: | سطر 22: | ||
== تطبيقات Next.js المُدارة على Vercel == | == تطبيقات Next.js المُدارة على Vercel == | ||
تتيح لك منصة [https://vercel.com/?utm_source=github.com&utm_medium=referral&utm_campaign=deployment Vercel] نشر تطبيق Next.js بسرعة دون أية إعدادات، | تتيح لك منصة [https://vercel.com/?utm_source=github.com&utm_medium=referral&utm_campaign=deployment Vercel] نشر تطبيق Next.js بسرعة دون أية إعدادات، إذ تتعرف المنصة تلقائيًا على تطبيقك وتُنفّذ الأمر <code>next build</code> وتحسّن المخرجات بما في ذلك: | ||
* الإبقاء على موجودات التخزين المؤقت لكامل التوزيعة إن لم يحدث فيها تغيرات. | * الإبقاء على موجودات التخزين المؤقت لكامل التوزيعة إن لم يحدث فيها تغيرات. | ||
| سطر 34: | سطر 34: | ||
* المراقبة التلقائية للأداء من خلال [https://vercel.com/analytics Next.js Analytics] | * المراقبة التلقائية للأداء من خلال [https://vercel.com/analytics Next.js Analytics] | ||
* شهادات | * شهادات HTTPS و SSL تلقائية. | ||
* الإدارة التلقائية لنظام التكامل المتواصل والنشر المتواصل CICD (من خلال GitHub و GitLab و Bitbucket وغيرها). | * الإدارة التلقائية لنظام التكامل المتواصل والنشر المتواصل CICD (من خلال GitHub و GitLab و Bitbucket وغيرها). | ||
* دعم [https://vercel.com/docs/environment-variables متغيرات البيئة]. | * دعم [https://vercel.com/docs/environment-variables متغيرات البيئة]. | ||
| سطر 45: | سطر 45: | ||
=== خادم Node.js === | === خادم Node.js === | ||
بإمكانك نشر تطبيقات Next.js على أية استضافة تدعم Node.js مثل [https://aws.amazon.com/ec2/ AWS EC2] | بإمكانك نشر تطبيقات 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"> | تأكد في البداية من وجود الإعدادين <code>"build"</code> و <code>"start"</code> في الملف <code>package.json</code>:<syntaxhighlight lang="json"> | ||
مراجعة 14:46، 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 الرسمي