عرض مصدر Next.js/going to production

<noinclude>{{DISPLAYTITLE:ما قبل مرحلة الإنتاج في Next.js}}</noinclude>
إليك بعض النصائح المهمة لتضمن أفضل تجربة مستخدم عندما تصل بتطبيق Next.js إلى مرحلة الإنتاج.

== نصائح عامة ==

* استخدم التخزين المؤقت caching أينما أتيح لك ذلك.
* تأكد من أن قواعد البيانات والواجهة الخلفية لتطبيقك من نفس الأصل (انشرهما ضمن نفس الموقع).
* حاول أن تشحن أقل كمية ممكنة من شيفرة JavaScript.
* أخِّر تحميل تجميعات JavaScript كبيرة الحجم حتى تحتاجها.
* تأكد من إعداد آلية للعمل مع السجلات logging.
* تأكد من إعداد آلية لمعالجة الأخطاء error handling.
* هيئ صفحات للحالة [[Next.js/custom error page|404]] (غير موجود) وللحالة [[Next.js/custom error page|500]] (خطأ).
* تأكد من [[Next.js/measuring performance|قياسك لأداء التطبيق]].
* استخدم الأداة [https://academy.hsoub.com/programming/workflow/%D8%AF%D9%84%D9%8A%D9%84%D9%83-%D8%A5%D9%84%D9%89-%D8%A7%D8%B3%D8%AA%D8%B9%D9%85%D8%A7%D9%84-%D8%A7%D9%84%D8%A3%D8%AF%D8%A7%D8%A9-lighthouse-r691/ Lighthouse] للتحقق من الأداء وتطبيقك لأفضل الممارسات وشمولية الوصول وتطبيقك لمعايير تحسين محركات البحث SEO. للحصول على أفضل النتائج، استخدم نسخة الإنتاج في متصفحك في نمط التخفي incognito كي لا تتأثر النتائج بالإضافات extensions المثبتة ضمن المتصفح.
* راجع صفحة [[Next.js/supported browsers features|المتصفحات والميزات المدعومة]] من توثيق Next.js.
* حسِّن الأداء من خلال استخدام:
** المكوّن [[Next.js/image optimization|<code>next/image</code> والتحسين التلقائي للصور]].
** [[Next.js/font optimization|التحسين التلقائي لخطوط الكتابة]].
** [[Next.js/script|تحسين أداء السكربتات]].
* حسن أداء التطبيق من ناحية التحميل.

== التخزين المؤقت Caching ==
يُحسّن التخزين المؤقت للبيانات زمن الاستجابة ويقلل عدد الطلبات المرسلة إلى خدمات خارجية. تضيف Next.js تلقائيًا ترويسة التخزين المؤقت caching header إلى الأصول assets التي لا تتغير في المجلد <code>next/static_/</code> مثل ملفات JavaScript و CSS والصور الساكنة وغيرها من الوسائط.<syntaxhighlight lang="bash">
Cache-Control: public, max-age=31536000, immutable
</syntaxhighlight>ستُبدَّل قيمة الترويسة <code>Cache-Control</code> إن ضبطت في الملف <code>next.config.js</code> في مرحلة الإنتاج للتأكد من إمكانية التخزين المؤقت للأصول الساكنة بفعالية وأفضل ما يمكن آنذاك. فإن أردت إعادة التحقق من البيانات المخزنة مؤقتًا لصفحة ولّدت بشكل ساكن، اضبط قيمة الخاصية <code>revalidate</code> في الدالة [[Next.js/data fetching#.D8.A7.D9.84.D8.AA.D8.AC.D8.AF.D9.8A.D8.AF%20.D8.A7.D9.84.D8.AA.D8.AF.D8.B1.D9.8A.D8.AC.D9.8A%20.D8.A7.D9.84.D8.B3.D8.A7.D9.83.D9.86%20.D9.81.D9.8A%20Next.js|<code>getStaticProps</code>]] الخاصة بهذه الصفحة. وإن كنت تستخدم المكوّن <code>next/image</code> فهنالك بعض [[Next.js/next image|القواعد الخاصة بالتخزين المؤقت]] لمحمَّل الصور المحسَّنة.

'''ملاحظة''': عندما تشغّل تطبيقك محليًا بتنفيذ الأمر <code>next dev</code> تُلغى الترويسات لمنع التخزين المؤقت على الحاسوب في مرحلة التطوير.<syntaxhighlight lang="bash">
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
</syntaxhighlight>بإمكانك أيضًا استخدام ترويسات التخزين المؤقت ضمن الدالة [[Next.js/data fetching#.D8.AD.D8.A7.D9.84.D8.A7.D8.AA%20.D8.A7.D8.B3.D8.AA.D8.AE.D8.AF.D8.A7.D9.85%20.D8.A7.D9.84.D8.AF.D8.A7.D9.84.D8.A9%20getServerSideProps%20.D9.81.D9.8A%20Next.js|<code>getServerSideProps</code>]] ومسارات API للاستجابة الديناميكية. إليك مثالًا عن استخدام الخاصية <code>stale-while-revalidate</code>:<syntaxhighlight lang="javascript">
// (s-maxage=10)تُعد هذه القيمة جديدة مدة عشر ثوان.
// إن أعيد الطلب ضمن هذه الثواني العشرة ستبقى هذه القيمة حديثة
// بينما إن أعيد الطلب قبل 59 ثانية ستُصيّر القيمة على الرغم من كونها قديمة
//(stale-while-revalidate=59).
//سيجري طلب خلف الستار لتحديث  هذه القيمة في الذاكرة المؤقتة 
//سترى هذه القيمة الجديدة إن حدّثت الصفحة
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}
</syntaxhighlight>تُضبط الترويسات <code>Cache-Control</code> افتراضيًا بشكل مختلف وفقًا لطريقة إحضار البيانات في الصفحة.

* تأخذ الترويسة <code>Cache-Control</code> القيمة الافتراضية التي يضبطها الأمر <code>next start</code> إن استخدمت صفحة إحدى الدالتين <code>getServerSideProps</code> أو <code>getInitialProps</code> لكي تمنع التخزين المؤقت العَرضي للاستجابة التي لا يمكن تخزينها مؤقتًا. إن أردت استخدام أسلوب آخر للتخزين المؤقت مع الدالة يمكنك استخدام التابع التالي داخل هذه الدالة:
<syntaxhighlight lang="bash">
res.setHeader('Cache-Control', 'value_you_prefer')
</syntaxhighlight>

* إن استخدمت الصفحة الدالة <code>getStaticProps</code> ستمتلك الترويسة <code>Cache-Control</code> الصيغة التالية لتخزين البيانات مؤقتًا أطول فترة ممكنة:
<syntaxhighlight lang="javascript">
// revalidate إن ضُبطت قيمة 
s-maxage=REVALIDATE_SECONDS, stale-while-revalidate
// revalidate أو إن لم تُستخدم
s-maxage=31536000, stale-while-revalidate
</syntaxhighlight><blockquote>'''ملاحظة''': لا بدّ أن يدعم مزوّد الاستضافة التخزين المؤقت للاستجابة الديناميكة. فإن كنت تستضيف تطبيقك بنفسك، فعليك أن تضيف المنطق السابق بنفسك من خلال التخزين بتقنية مفتاح/قيمة مثل Redis. كما سيساعدك [https://vercel.com/docs/edge-network/caching Edge Caching] دون أية إعدادات إن كنت تستخدم Vercel.</blockquote>

== تخفيض حجم JavaScript ==
لتقليل حجم شيفرة [[JavaScript]] المرسلة إلى المتصفح، تستطيع استخدام الأدوات التالية لفهم محتويات كل تجميع من تجميعات JavaScript:

* [https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost Import Cost]: تعرض حجم الحزمة المدرجة ضمن الشيفرة في بيئة VSCode (فيجوال ستدوديو كود).
* [https://packagephobia.com/ Package Phobia:] يحسب تبعات إضافة اعتمادية تطوير جديدة إلى مشروعك.
* [https://bundlephobia.com/ Bundle Phobia]: يحلل مقدار الزيادة التي تسببها اعتمادية في حجم التجميعات.
* [https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer Webpack Bundle Analyzer]: يعرض حجم ملف الخرج لحزمة webpack بأسلوب بصري تفاعلي على شكل خريطة شجرية قابلة للتكبير.
* bundlejs: أداة متاحة عبر الإنترنت لتحزيم bundle وتقليص minify مشاريعك.

تُفصل شيفرة JavaScript لكل ملف موجود في المجلد <code>/pages</code> تلقائيًا ضمن تجميعة خاصة عند بناء التطبيق <code>next build</code>. بإمكانك أيضًا استخدام [[Next.js/dynamic import|الإدراج الديناميكي]] لإبطاء تحميل المكوّنات والمكتبات، إذ قد ترغب مثلًا في تأخير تحميل شيفرة وحدة برمجية حتى ينقر المستخدم على زر مثلًا. 

== إدارة السجلات Logging ==
تعمل Next.js على جانبي الخادم والعميل وبالتالي ستجد عدة نماذج لدعم إدارة السجلات والرسائل:

* <code>console.log</code> من جانب المتصفح.
* <code>stdout</code> من جانب الخادم.

لكن إن أردت استخدام حزمة مُهيكلة لإدارة السجلات سننصحك بالحزمة [https://www.npmjs.com/package/pino Pino]، وإن كنت تعمل على Vercel، فهناك [https://vercel.com/integrations#logging حزمة متكاملة مدمجة لإدارة السجلات] تتوافق مع Next.js.

== التعامل مع الأخطاء ==
بإمكانك عند وقوع خطأ غير متوقع أثناء تنفيذ الشيفرة التحكم بطريقة عرضه للمستخدم باستخدام الصفحة "[[Next.js/custom error page|500]]". ويُفضّل أن تخصص هذه الصفحة بما يلائم تطبيقك بدلًا من صفحة Next.js الافتراضية. كما يمكنك تتبع وتسجيل الاستثناءات والأخطاء من خلال أدوات مثل Sentry. 

يوضح لك [https://github.com/vercel/next.js/tree/canary/examples/with-sentry هذا المثال] كيفية إلتقاط الأخطاء والتبليغ عنها من طرف المتصفح ومن طرف الخادم باستعمال Sentry SDK المتاحة من أجل تطبيقات Next.js، كما هنالك [https://vercel.com/integrations/sentry?utm_source=next-site&utm_medium=docs&utm_campaign=next-website دمج Sentry مع Vercel]. 

== أداء التطبيق أثناء التحميل ==
لا بد أولًا كي تحسن أداء التطبيق أثناء التحميل من تحديد ما ينبغي قياسه وكيفية قياسه، وتُعد مؤشرات ويب الحيوية [https://vercel.com/blog/core-web-vitals Core Web Vitals] معيارًا جيدًا يمكن قياسه من خلال المتصفح. إن لم تكن على دراية بحيثيات هذه المؤشرات، بإمكانك البحث عنها عبر الإنترنت واختيار المؤشرات المحددة التي تناسبك في تحديد أداء التحميل لتطبيق. 

وقد ترغب (كعمل نموذجي) في قياس أداء التحميل في البيئات التالية:

* في المختبر من خلال حاسوبك الشخصي أو المحاكي.
* في حقل العمل باستخدام بيانات حقيقية لزوار فعليين.
* محليًا من خلال اختبار تنفّذه على جهازك.
* عن بعد من خلال اختبار تجريه على حساب سحابي.

كرر استعمال الاستراتيجيات التالية بمجرد أن تنتهي من اختبار أداء التحميل، طبق استراتيجية ثم قس الأداء وحاول أن تحسِّن في التطبيق قدر المستطاع ثم انتقل إلى الأخرى:

* استخدم التخزين المؤقت في الأماكن القريبة من مكان نشر قاعدة البيانات أو الواجهة البرمجية API.
* استخدم القيمة التي لن تزيد الحمولة على الواجهة الخلفية للتطبيق.
* استخدم [[Next.js/data fetching#.D8.A7.D9.84.D8.AA.D8.AC.D8.AF.D9.8A.D8.AF%20.D8.A7.D9.84.D8.AA.D8.AF.D8.B1.D9.8A.D8.AC.D9.8A%20.D8.A7.D9.84.D8.B3.D8.A7.D9.83.D9.86%20.D9.81.D9.8A%20Next.js|التجديد التدريجي الساكن]] للتقليل من عدد الطلبات التي ترسلها إلى الواجهة الخلفية.
* أزل شيفرة JavaScript غير المستخدمة.

يمكن أن تعطيك بعض مؤشرات ويب الحيوية فكرة عن مدى تأثير حجم التجميعات والاستراتيجيات التي تخفف من هذه التأثيرات مثل:

* ضبط إعدادات محرر الشيفرة لديك ليعرض تبعات إدراج الاعتماديات وأحجامها.
* الحصول على حزم بديلة أصغر.
* التحميل الديناميكي للمكوّنات والاعتماديات.

== أمثلة ==

* [https://github.com/vercel/next.js/tree/canary/examples/ssr-caching ssr-caching]
* [https://github.com/vercel/next.js/tree/canary/examples/with-dynamic-import with-dynamic-import]
* [https://github.com/Logflare/next-pino-logflare-logging-example with-logging]
* [https://github.com/vercel/next.js/tree/canary/examples/with-sentry with-sentry]

== المصادر ==

* الصفحة [https://nextjs.org/docs/going-to-production Going to Production] من توثيق Next.js الرسمي.
[[تصنيف:Next.js|{{SUBPAGENAME}}]]