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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:تتبع ملفات الخرج في Next.js}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:تتبع ملفات الخرج في Next.js}}</noinclude>
−
تتتبع Next.js تقائيًا كل صفحة واعتمادياتها أثناء بناء التطبيق لتحديد جميع الملفات المطلوبة لنشر نسخة الإنتاج من التطبيق، تتيح ذلك إمكانية تقليل حجم ملفات النشر. فعندما استخدمت Docker سابقًا لنشر تطبيقك، كنت بحاجة إلى تثبيت جميع ملفات الاعتماديات <code>dependencies</code> التي تشير إليها حزمة التطبيق حتى تستطيع تشغيله <code>next start</code>. لكن بإمكانك ابتداءً من النسخة 12 تتبع ملفات الخرج في المجلد <code>/next.</code> كي يضم فقط الملفات الضرورية. تلغي هذه الميزة أيضًا الحاجة إلى الوجهة <code>serverless</code> الملغاة التي قد تسبب مشاكل عدة، وتنشئ نسخًا إضافيةً غير ضرورية.
+
تتتبع Next.js تقائيًا كل صفحة واعتمادياتها أثناء بناء التطبيق لتحديد جميع الملفات المطلوبة لنشر نسخة الإنتاج من التطبيق، تتيح ذلك إمكانية تقليل حجم ملفات النشر. فعندما استخدمت Docker سابقًا لنشر تطبيقك، كنت بحاجة إلى تثبيت جميع ملفات الاعتماديات <code>dependencies</code> التي تشير إليها حزمة التطبيق حتى تستطيع تشغيله <code>next start</code>. لكن بإمكانك ابتداءً من النسخة 12 تتبع ملفات الخرج في المجلد <code>/next.</code> كي يضم فقط الملفات الضرورية. تلغي هذه الميزة أيضًا الحاجة إلى الوجهة <code>serverless</code> الملغاة التي قد تسبب مشاكل عدة، وتنشئ نسخًا إضافيةً غير ضرورية.
  
 
== كيف تعمل ميزة تتبع ملفات الخرج ==
 
== كيف تعمل ميزة تتبع ملفات الخرج ==
−
تستخدم Next.js التوجيه <code>[https://github.com/vercel/nft vercel/nft@]</code> أثناء بناء التطبيق <code>next build</code> لتحلل كل من <code>import</code> و <code>require</code> و <code>fs</code> بشكل ساكن لتحديد جميع الملفات التي قد تحمّلها الصفحة.كما يجري التحقق من الملفات التي يحتاجها خادم إنتاج Next.js ووضعها في ملف الخرج <code>next/next-server.js.nft.json.</code> الذي يمكن رفعه في مرحلة الإنتاج.
+
تستخدم Next.js التوجيه <code>[https://github.com/vercel/nft vercel/nft@]</code> أثناء بناء التطبيق <code>next build</code> لتحلل كل من <code>import</code> و <code>require</code> و <code>fs</code> بشكل ساكن لتحديد جميع الملفات التي قد تحمّلها الصفحة. كما يجري التحقق من الملفات التي يحتاجها خادم إنتاج Next.js ووضعها في ملف الخرج <code>next/next-server.js.nft.json.</code> الذي يمكن رفعه في مرحلة الإنتاج.
  
 
ولرفع الملفات ذات الامتداد <code>nft.json.</code> المنتقلة إلى مجلد الخرج <code>next.</code>، بإمكانك قراءة قائمة الملفات التي تنتهي بالامتداد <code>nft.json.</code> في كل ملف تتبع ونسخها إلى مكان نشر التطبيق.
 
ولرفع الملفات ذات الامتداد <code>nft.json.</code> المنتقلة إلى مجلد الخرج <code>next.</code>، بإمكانك قراءة قائمة الملفات التي تنتهي بالامتداد <code>nft.json.</code> في كل ملف تتبع ونسخها إلى مكان نشر التطبيق.
  
 
== النسخ التلقائي للملفات المُتتبعة (ميزة تجريبية) ==
 
== النسخ التلقائي للملفات المُتتبعة (ميزة تجريبية) ==
−
يمكن أن تُنشئ Next.js مجلد قائم بذاته <code>standalone</code> ينسخ الملفات الضرورية لنشر نسخة الإنتاج فقط بما في ذلك الملفات الموجودة في المجلد <code>node_modules</code>. ولتشغيل النسخ التلقائي، عليك أولًا تفعيل الميزة في الملف <code>next.config.js</code>:<syntaxhighlight lang="javascript">
+
يمكن أن تُنشئ Next.js مجلد قائم بذاته <code>standalone</code> ينسخ الملفات الضرورية لنشر نسخة الإنتاج فقط بما في ذلك الملفات الموجودة في المجلد <code>node_modules</code>. ولتشغيل النسخ التلقائي، عليك أولًا تفعيل الميزة <code>outputStandalone</code> في الملف <code>next.config.js</code>:<syntaxhighlight lang="javascript">
 
module.exports = {
 
module.exports = {
 
   experimental: {
 
   experimental: {
سطر 14: سطر 14:
 
   },
 
   },
 
}
 
}
−
</syntaxhighlight>سينتج عن ذلك المجلد <code>next/standalone</code> الذي يمكن نشره بشكل مستقل دون الحاجة إلى تثبيت .
+
</syntaxhighlight>سينتج عن ذلك المجلد <code>next/standalone</code> الذي يمكن نشره بشكل مستقل دون الحاجة إلى تثبيت.
  
 
إضافة إلى ذلك، بإمكانك استخدام ملف JavaScript المصغر <code>server.js</code> الذي ينتج عن العملية بدلًا من <code>next start</code>. لا ينسخ الخادم المصغّر السابق (<code>server.js</code>) المجلدين <code>public</code> أو <code>.next/static</code> افتراضيًا لأن من يتعامل معهما عادة هي شبكة توزيع المحتوى CDN. مع ذلك يمكن نسخ محتوى هذين المجلدين إلى <code>standalone/public</code> و <code>standalone/.next/static</code> يدويًا ليخدّمهما الملف <code>server.js</code> تلقائيًا بعد ذلك.
 
إضافة إلى ذلك، بإمكانك استخدام ملف JavaScript المصغر <code>server.js</code> الذي ينتج عن العملية بدلًا من <code>next start</code>. لا ينسخ الخادم المصغّر السابق (<code>server.js</code>) المجلدين <code>public</code> أو <code>.next/static</code> افتراضيًا لأن من يتعامل معهما عادة هي شبكة توزيع المحتوى CDN. مع ذلك يمكن نسخ محتوى هذين المجلدين إلى <code>standalone/public</code> و <code>standalone/.next/static</code> يدويًا ليخدّمهما الملف <code>server.js</code> تلقائيًا بعد ذلك.
سطر 32: سطر 32:
  
 
* قد تخفق Next.js أحيانًا في تضمين بعض الملفات المطلوبة أو قد تضم ملفات غير مستخدمة. بإمكانك في هذه الحالات تصدير خاصيتي تهيئة الصفحة <code>unstable_includeFiles</code> و <code>unstable_excludeFiles</code> بالترتيب. إذ تقبل كل خاصية مصفوفة من تعابير المطابقة minimatch globs المرتبطة بجذر المشروع لتضمين أو إزالة الملفات أثناء التتبع.
 
* قد تخفق Next.js أحيانًا في تضمين بعض الملفات المطلوبة أو قد تضم ملفات غير مستخدمة. بإمكانك في هذه الحالات تصدير خاصيتي تهيئة الصفحة <code>unstable_includeFiles</code> و <code>unstable_excludeFiles</code> بالترتيب. إذ تقبل كل خاصية مصفوفة من تعابير المطابقة minimatch globs المرتبطة بجذر المشروع لتضمين أو إزالة الملفات أثناء التتبع.
−
* لا تقدّم Next.js أي شيء حاليًا للملفات <code>nft.json.</code>، وينبغي أن تُقرأ من قبل المنصة التي ستنشر عليها التطبيق (مثل Vercel) كي يجري نشره بأصغر حزمة ممكنة. لكن قد يظهر أمر جديد في النسخات المستقبلة لاستغلال ملفات <code>nft.json.</code>.
+
* لا تقدّم Next.js أي شيء حاليًا للملفات <code>nft.json.</code>، وينبغي أن تُقرأ من قبل المنصة التي ستنشر عليها التطبيق (مثل Vercel) كي يجري نشره بأصغر حزمة ممكنة. لكن قد يظهر أمر جديد في النسخات المستقبلة لاستغلال ملفات <code>nft.json.</code>.

مراجعة 05:01، 12 يوليو 2022

تتتبع Next.js تقائيًا كل صفحة واعتمادياتها أثناء بناء التطبيق لتحديد جميع الملفات المطلوبة لنشر نسخة الإنتاج من التطبيق، تتيح ذلك إمكانية تقليل حجم ملفات النشر. فعندما استخدمت Docker سابقًا لنشر تطبيقك، كنت بحاجة إلى تثبيت جميع ملفات الاعتماديات dependencies التي تشير إليها حزمة التطبيق حتى تستطيع تشغيله next start. لكن بإمكانك ابتداءً من النسخة 12 تتبع ملفات الخرج في المجلد /next. كي يضم فقط الملفات الضرورية. تلغي هذه الميزة أيضًا الحاجة إلى الوجهة serverless الملغاة التي قد تسبب مشاكل عدة، وتنشئ نسخًا إضافيةً غير ضرورية.

كيف تعمل ميزة تتبع ملفات الخرج

تستخدم Next.js التوجيه vercel/nft@ أثناء بناء التطبيق next build لتحلل كل من import و require و fs بشكل ساكن لتحديد جميع الملفات التي قد تحمّلها الصفحة. كما يجري التحقق من الملفات التي يحتاجها خادم إنتاج Next.js ووضعها في ملف الخرج next/next-server.js.nft.json. الذي يمكن رفعه في مرحلة الإنتاج.

ولرفع الملفات ذات الامتداد nft.json. المنتقلة إلى مجلد الخرج next.، بإمكانك قراءة قائمة الملفات التي تنتهي بالامتداد nft.json. في كل ملف تتبع ونسخها إلى مكان نشر التطبيق.

النسخ التلقائي للملفات المُتتبعة (ميزة تجريبية)

يمكن أن تُنشئ Next.js مجلد قائم بذاته standalone ينسخ الملفات الضرورية لنشر نسخة الإنتاج فقط بما في ذلك الملفات الموجودة في المجلد node_modules. ولتشغيل النسخ التلقائي، عليك أولًا تفعيل الميزة outputStandalone في الملف next.config.js:

module.exports = {
  experimental: {
    outputStandalone: true,
  },
}

سينتج عن ذلك المجلد next/standalone الذي يمكن نشره بشكل مستقل دون الحاجة إلى تثبيت.

إضافة إلى ذلك، بإمكانك استخدام ملف JavaScript المصغر server.js الذي ينتج عن العملية بدلًا من next start. لا ينسخ الخادم المصغّر السابق (server.js) المجلدين public أو .next/static افتراضيًا لأن من يتعامل معهما عادة هي شبكة توزيع المحتوى CDN. مع ذلك يمكن نسخ محتوى هذين المجلدين إلى standalone/public و standalone/.next/static يدويًا ليخدّمهما الملف server.js تلقائيًا بعد ذلك.

التحفظات على تتبع ملفات الخرج

  • يُستخدم مجلد المشروع افتراضيًا للتتبع في حال كان مهيّأً ضمن مستودع وحيد monorepo. أما عند تنفيذ الأمر next build packages/web-app، سيكون المجلد packages/web-app هو الجذر الذي يستخدم للتتبع ولن تتضمن عملية التتبع أي ملف خارج هذا المجلد. ولإضافة الملفات التي تقع خارجه، لا بد من ضبط قيمة experimental.outputFileTracingRoot في ملف التهيئة next.config.js:
// packages/web-app/next.config.js
module.exports = {
  experimental: {
    // سيضيف ذلك ملفات من قاعدة المستودع الوحيد وصولًا إلى مجلدين أعلى
    outputFileTracingRoot: path.join(__dirname, '../../'),
  },
}
  • قد تخفق Next.js أحيانًا في تضمين بعض الملفات المطلوبة أو قد تضم ملفات غير مستخدمة. بإمكانك في هذه الحالات تصدير خاصيتي تهيئة الصفحة unstable_includeFiles و unstable_excludeFiles بالترتيب. إذ تقبل كل خاصية مصفوفة من تعابير المطابقة minimatch globs المرتبطة بجذر المشروع لتضمين أو إزالة الملفات أثناء التتبع.
  • لا تقدّم Next.js أي شيء حاليًا للملفات nft.json.، وينبغي أن تُقرأ من قبل المنصة التي ستنشر عليها التطبيق (مثل Vercel) كي يجري نشره بأصغر حزمة ممكنة. لكن قد يظهر أمر جديد في النسخات المستقبلة لاستغلال ملفات nft.json..
مجلوبة من "https://wiki.hsoub.com/index.php?title=Next.js/output_file_tracing&oldid=32213"