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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:التعامل مع السكربتات في Next.js}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:التعامل مع السكربتات في Next.js}}</noinclude>
−
يُعد المكوّن<code>next/script</code> في Next.js امتدادًا للعنصر <code><script></code> في HTML. ويتيح هذا المكوّن للمطورين تحديد أولوية تحميل السكربتات التي مصدرها طرف آخر في التطبيق خارج المكوّن <code>next/head</code> موفرًا بذلك الوقت ومحسنًا أداء التطبيق من ناحية التحميل.
+
يُعد المكوّن <code>next/script</code> في Next.js امتدادًا للعنصر <code><script></code> في HTML. ويتيح هذا المكوّن للمطورين تحديد أولوية تحميل السكربتات التي مصدرها طرف آخر في تطبيقاتهم خارج المكوّن <code>next/head</code> موفرين بذلك الوقت ومحسنين أداء التطبيق من ناحية التحميل.
 
{| class="wikitable"
 
{| class="wikitable"
 
|+
 
|+
سطر 19: سطر 19:
 
   )
 
   )
 
}
 
}
−
</syntaxhighlight>تستخدم مواقع ويب أحيانًا سكربتات يكتبها طرف آخر لإضافة وظائف مختلفة إلى هذه المواقع مثل التحليلات الإحصائية و الإعلانات وأدوات دعم العملاء وإدارة القبولات. لكن قد يسبب ذلك مشاكل تؤثر على تجربة المستخدم والمطوّر:
+
</syntaxhighlight>تستخدم مواقع ويب أحيانًا سكربتات يكتبها طرف آخر لإضافة وظائف مختلفة إلى هذه المواقع مثل التحليلات الإحصائية والإعلانات وأدوات دعم العملاء وإدارة القبولات. لكن قد يسبب ذلك مشاكل تؤثر على تجربة المستخدم والمطوّر:
  
−
* بطئ تحميل بعض سكربتات الطرف الآخر مما ينعكس سلبًا على الأداء وعلى تجربة المستخدم وخاصة إن أعاقا تصيير بعض الأجزاء وأخّرت تحميل محتوى أجزاء أخرى من الصفحة.
+
* بطء تحميل بعض سكربتات الطرف الآخر مما ينعكس سلبًا على الأداء وعلى تجربة المستخدم وخاصة إن أعاقت تصيير بعض الأجزاء وأخّرت تحميل محتوى أجزاء أخرى من الصفحة.
 
* صعوبة اختيار الموقع المناسب للسكربت في التطبيق للتأكد من تحميل الموقع بالشكل الأمثل.
 
* صعوبة اختيار الموقع المناسب للسكربت في التطبيق للتأكد من تحميل الموقع بالشكل الأمثل.
  
−
يُسهّل المكوّن على المطوّرين وضع سكربت من مصدر آخر في أي مكان من التطبيق دون الحاجة إلى التفكير باستراتيجيات أنسب لتحميله.
+
يُسهّل المكوّن <code>next/script</code> على المطوّرين وضع سكربت من مصدر آخر في أي مكان من التطبيق دون الحاجة إلى التفكير بالاستراتيجيات أنسب لتحميله.
  
 
== استخدام المكوّن Script في Next.js ==
 
== استخدام المكوّن Script في Next.js ==
−
أدرج المكوّن <code>next/script</code> إن اردت استخدام سكربت من طرف آخر:<syntaxhighlight lang="javascript">
+
أدرج المكوّن <code>next/script</code> إن اردت استخدام سكربت من طرف آخر بالشكل التالي:<syntaxhighlight lang="javascript">
 
import Script from 'next/script'
 
import Script from 'next/script'
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
=== الخاصية <code>strategy</code> ===
 
=== الخاصية <code>strategy</code> ===
−
يتيح لك استخدام المكوّن تحديد توقيت استخدام السكربتات من خلال الخاصية <code>strategy</code> :<syntaxhighlight lang="javascript">
+
يتيح لك استخدام المكوّن تحديد توقيت استخدام السكربتات من خلال الخاصية <code>strategy</code>:<syntaxhighlight lang="javascript">
 
<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />
 
<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />
−
</syntaxhighlight>هنالك ثلاث استراتيجيات مختلفة لتحميل السكربتات يمكن استخدامها:
+
</syntaxhighlight>هنالك ثلاث استراتيجيات مختلفة يمكن استخدامها لتحميل السكربتات:
  
 
* <code>beforeInteractive</code>: تحميل السكربت قبل أن تغدو الصفحة تفاعلية مع المستخدم.
 
* <code>beforeInteractive</code>: تحميل السكربت قبل أن تغدو الصفحة تفاعلية مع المستخدم.
 
* <code>afterInteractive</code>: (الطريقة الافتراضية) تحميل السكربت بعد أن تغدو الصفحة تفاعلية مباشرة.
 
* <code>afterInteractive</code>: (الطريقة الافتراضية) تحميل السكربت بعد أن تغدو الصفحة تفاعلية مباشرة.
 
* <code>lazyOnload</code>: تحميل السكربت أثناء فترة التوقف عن العمل idle.
 
* <code>lazyOnload</code>: تحميل السكربت أثناء فترة التوقف عن العمل idle.
−
* <code>worker</code>:(تجريبية) تحميل السكربت في عامل ويب web worker.
+
* <code>worker</code>: (تجريبية) تحميل السكربت في عامل ويب web worker.
  
 
==== استخدام استراتيجية beforeInteractive ====
 
==== استخدام استراتيجية beforeInteractive ====
سطر 97: سطر 97:
  
 
=== التحميل الجانبي للسكربت باستخدام عامل ويب (استراتيجية تجريبية) ===
 
=== التحميل الجانبي للسكربت باستخدام عامل ويب (استراتيجية تجريبية) ===
−
<blockquote>ملاحظة: لا تزال هذه الاستراتيجية تجريبية وغير مستقرة وقد تسبب أخطاءً غير متوقعة في تطبيق لذك استخدمها بحذر.</blockquote>يُحدد موقع السكربتات التي تستخدم هذه الاستراتيجية وتُنفَّذ بواسطة [https://partytown.builder.io/ Partytown]، وقد يُحسِّن ذلك أداء الموقع بتخصيص الخيط الأساسي لتنفيذ التطبيق لبقية الشيفرة.
+
<blockquote>'''ملاحظة''': لا تزال هذه الاستراتيجية تجريبية وغير مستقرة وقد تسبب أخطاءً غير متوقعة في تطبيق لذك استخدمها بحذر.</blockquote>يُحدَّد موقع السكربتات التي تستخدم هذه الاستراتيجية وتُنفَّذ بواسطة [https://partytown.builder.io/ Partytown]، وقد يُحسِّن ذلك أداء الموقع بتخصيص الخيط الأساسي لتنفيذ شيفرة التطبيق الأساسية. لا تزال هذه الاستراتيجية تجريبية، ولا يمكن استخدامها دون تمكين الراية <code>nextScriptWorkers</code> في الملف <code>next.config.js</code>:<syntaxhighlight lang="javascript">
−
 
 
−
لا تزال هذه الاستراتيجية تجريبية ولا يمكن استخدامها دون تمكين الراية <code>nextScriptWorkers</code> في الملف <code>next.config.js</code>:<syntaxhighlight lang="javascript">
 
 
module.exports = {
 
module.exports = {
 
   experimental: {
 
   experimental: {
سطر 105: سطر 103:
 
   },
 
   },
 
}
 
}
−
</syntaxhighlight>نفّذ بعد ذلك أحد الأمرين <code>npm run dev</code> أو <code>yarn dev</code> وسترشدك خلال عملية تثبيت الحزم اللازمة لإتمام الأمر:<syntaxhighlight lang="bash">
+
</syntaxhighlight>نفّذ بعد ذلك أحد الأمرين <code>npm run dev</code> أو <code>yarn dev</code> وسترشدك Next.js خلال عملية تثبيت الحزم اللازمة لإتمام الأمر:<syntaxhighlight lang="bash">
 
npm run dev
 
npm run dev
  
سطر 115: سطر 113:
 
#
 
#
 
# ...
 
# ...
−
</syntaxhighlight>بعد أن يكتمل التثبيت، اجعل <code>strategy="worker"</code> لكي يُنسخ Partytown تلقائيًا إلى تطبيقك لتبدأ بتحميل السكربت جانبيًا ضمن خيط عامل ويب.<syntaxhighlight lang="javascript">
+
</syntaxhighlight>بعد أن يكتمل التثبيت، اجعل <code>strategy="worker"</code> لكي يُنسخ Partytown تلقائيًا إلى تطبيقك وتبدأ بتحميل السكربت جانبيًا ضمن خيط عامل ويب.<syntaxhighlight lang="javascript">
 
<Script src="https://example.com/analytics.js" strategy="worker" />
 
<Script src="https://example.com/analytics.js" strategy="worker" />
−
</syntaxhighlight>ينبغي الإشارة إلى بعض التنازلات أو الآثار الجانبية لتحميل سكربتات طرف آخر في عامل ويب. يمكنك العودة إلى [https://partytown.builder.io/trade-offs توثيق Partytown] لمعلومات أكثر
+
</syntaxhighlight>ينبغي الإشارة إلى وجود بعض الآثار الجانبية لتحميل سكربتات طرف آخر في عامل ويب، وبإمكانك العودة إلى [https://partytown.builder.io/trade-offs توثيق Partytown] لمعلومات أكثر.
  
−
==== تهيئة الاستراتيجية <code>worker</code> للعمل ====
+
==== تهيئة الاستراتيجية <code>worker</code> للعمل ====
 
على الرغم من عدم حاجة هذه الاستراتيجة إلى إعدادات خاصة لتعمل، يدعم Partytown استخدام كائن تهيئة config object لتعديل بعض إعداداته بما في ذلك نمط التنقيح <code>debug</code> وتوجيه الأحداث forwarding events ومسببات الأحداث triggers.
 
على الرغم من عدم حاجة هذه الاستراتيجة إلى إعدادات خاصة لتعمل، يدعم Partytown استخدام كائن تهيئة config object لتعديل بعض إعداداته بما في ذلك نمط التنقيح <code>debug</code> وتوجيه الأحداث forwarding events ومسببات الأحداث triggers.
  
−
إن رغبت في إضافة إعدادات أخرى، بإمكانك تضمينها داخل المكوّن <code></ Head></code> الذي يُستخدم في ملف [[Next.js/custom document|<code>document.js_</code>]] مخصص:<syntaxhighlight lang="javascript">
+
إن رغبت في إضافة إعدادات أخرى، بإمكانك تضمينها داخل المكوّن <code></ Head></code> الذي يُستخدم في ملف [[Next.js/custom document|<code>document.js_</code>]] مخصص:<syntaxhighlight lang="javascript">
 
import { Html, Head, Main, NextScript } from 'next/document'
 
import { Html, Head, Main, NextScript } from 'next/document'
  
سطر 148: سطر 146:
 
   )
 
   )
 
}
 
}
−
</syntaxhighlight>لا بد من تحقيق الشروط التالية إن أردت تعديل إعدادات :
+
</syntaxhighlight>لا بد من تحقيق الشروط التالية إن أردت تعديل إعدادات Partytown:
−
 
 
−
# استخدام السمة <code>data-partytown-config</code> لإلغاء الإعدادات الافتراضية التي تستخدمها  Next.js.
 
−
# استخدام الخاصية التالية وقيمتها <code>"/lib: "/_next/static/~partytown</code> ضمن كائن التهيئة لكي يعرف Partytown أين تخزّن Next.js الملفات الساكنة الضرورية. وهذا الأمر غير ضروري إن أردت تخزين ملفات مكتبة Partytown في مجلد مستقل.
 
  
−
<blockquote>إن كنت تستخدم asset prefix وأردت تعديل إعدادات Partytown الافتراضية، عليك تضمينها كجزء من مسار الخاصية <code>lib</code>.</blockquote>للاطلاع على مزيد من إعدادت التهيئة لمكتبة Partytown راجع التوثيق الخاص بها.
+
# استخدام السمة <code>data-partytown-config</code> لإلغاء الإعدادات الافتراضية التي تستخدمها Next.js.
 +
# استخدام الخاصية التالية <code>"/lib: "/_next/static/~partytown</code> ضمن كائن التهيئة لكي يعرف Partytown أين تخزّن Next.js الملفات الساكنة الضرورية. وهذا الأمر غير ضروري إن أردت تخزين ملفات مكتبة Partytown في مجلد مستقل.
  
 +
<blockquote>'''ملاحظة''': إن كنت تستخدم asset prefix وأردت تعديل إعدادات Partytown الافتراضية، عليك تضمينها كجزء من مسار الخاصية <code>lib</code>.</blockquote>
 
=== السكربتات السطرية في Next.js ===
 
=== السكربتات السطرية في Next.js ===
 
يدعم المكوّن <code></ Script></code> السكربتات السطرية أو تلك التي لا تحمّل من ملفات خارجية. إذ يمكن كتابتها ضمن القوسين المعقوصين للمكوّن:<syntaxhighlight lang="javascript">
 
يدعم المكوّن <code></ Script></code> السكربتات السطرية أو تلك التي لا تحمّل من ملفات خارجية. إذ يمكن كتابتها ضمن القوسين المعقوصين للمكوّن:<syntaxhighlight lang="javascript">
سطر 160: سطر 157:
 
   {`document.getElementById('banner').classList.remove('hidden')`}
 
   {`document.getElementById('banner').classList.remove('hidden')`}
 
</Script>
 
</Script>
−
</syntaxhighlight>أو من خلال استعمال الخاصية <code>dangerouslySetInnerHTML</code>: <syntaxhighlight lang="javascript">
+
</syntaxhighlight>أو من خلال استعمال الخاصية <code>dangerouslySetInnerHTML</code>: <syntaxhighlight lang="javascript">
 
<Script
 
<Script
 
   id="show-banner"
 
   id="show-banner"
سطر 167: سطر 164:
 
   }}
 
   }}
 
/>
 
/>
−
</syntaxhighlight>لا بد من استخدام الخاصية <code>id</code> في السكربتات السطرية لتتبع Next.js السكربت وتحسن أداءه.
+
</syntaxhighlight>لا بد من استخدام الخاصية <code>id</code> في السكربتات السطرية كي تتبع Next.js السكربت وتحسن أداءه.
  
 
=== تنفيذ الشيفرة بعد التحميل <code>onLoad</code> في Next.js ===
 
=== تنفيذ الشيفرة بعد التحميل <code>onLoad</code> في Next.js ===
−
<blockquote>لا تستخدم كلتا الخاصيتين <code>onLoad</code> و <code>onError</code> مع استراتيجية التحميل <code>beforeInteractive</code></blockquote>تتطلب بعد السكربتات التي يقدمها طرف آخر تنفيذ شيفرة JavaScript بعد أن ينتهي تحميل تلك السكربتات، وذلك كي تنسخ محتوى أو تستدعي دالة. فإن كنت تستخدم إحدى استراتيجيتي التحميل <code>afterInteractive</code> أو <code>lazyOnload</code> بإمكانك تنفيذ الشيفرة بعد تحميلها من خلال استخدام الخاصية <code>onLoad</code>:<syntaxhighlight lang="javascript">
+
<blockquote>'''ملاحظة''': لا تستخدم كلتا الخاصيتين <code>onLoad</code> و <code>onError</code> مع استراتيجية التحميل <code>beforeInteractive</code></blockquote>تتطلب بعد السكربتات التي يقدمها طرف آخر تنفيذ شيفرة JavaScript بعد أن ينتهي تحميل تلك السكربتات، وذلك كي تنسخ محتوى معين أو تستدعي دالة. فإن كنت تستخدم إحدى استراتيجيتي التحميل <code>afterInteractive</code> أو <code>lazyOnload</code> بإمكانك تنفيذ الشيفرة بعد تحميلها من خلال استخدام الخاصية <code>onLoad</code>:<syntaxhighlight lang="javascript">
 
import { useState } from 'react'
 
import { useState } from 'react'
 
import Script from 'next/script'
 
import Script from 'next/script'
سطر 227: سطر 224:
 
== المصادر ==
 
== المصادر ==
  
−
* الصفحة [https://nextjs.org/docs/basic-features/script Script Component] من توثيق Next.js الرسمي
+
* الصفحة [https://nextjs.org/docs/basic-features/script Script Component] من توثيق Next.js الرسمي.

مراجعة 15:06، 30 مايو 2022

يُعد المكوّن next/script في Next.js امتدادًا للعنصر <script> في HTML. ويتيح هذا المكوّن للمطورين تحديد أولوية تحميل السكربتات التي مصدرها طرف آخر في تطبيقاتهم خارج المكوّن next/head موفرين بذلك الوقت ومحسنين أداء التطبيق من ناحية التحميل.

النسخة التغييرات فيما يتعلق بتحميل السكرتات
v11.0.0 ظهور المكوّن next/script.

إليك طريقة استخدام المكوّن:

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://www.google-analytics.com/analytics.js" />
    </>
  )
}

تستخدم مواقع ويب أحيانًا سكربتات يكتبها طرف آخر لإضافة وظائف مختلفة إلى هذه المواقع مثل التحليلات الإحصائية والإعلانات وأدوات دعم العملاء وإدارة القبولات. لكن قد يسبب ذلك مشاكل تؤثر على تجربة المستخدم والمطوّر:

  • بطء تحميل بعض سكربتات الطرف الآخر مما ينعكس سلبًا على الأداء وعلى تجربة المستخدم وخاصة إن أعاقت تصيير بعض الأجزاء وأخّرت تحميل محتوى أجزاء أخرى من الصفحة.
  • صعوبة اختيار الموقع المناسب للسكربت في التطبيق للتأكد من تحميل الموقع بالشكل الأمثل.

يُسهّل المكوّن next/script على المطوّرين وضع سكربت من مصدر آخر في أي مكان من التطبيق دون الحاجة إلى التفكير بالاستراتيجيات أنسب لتحميله.

استخدام المكوّن Script في Next.js

أدرج المكوّن next/script إن اردت استخدام سكربت من طرف آخر بالشكل التالي:

import Script from 'next/script'

الخاصية strategy

يتيح لك استخدام المكوّن تحديد توقيت استخدام السكربتات من خلال الخاصية strategy:

<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />

هنالك ثلاث استراتيجيات مختلفة يمكن استخدامها لتحميل السكربتات:

  • beforeInteractive: تحميل السكربت قبل أن تغدو الصفحة تفاعلية مع المستخدم.
  • afterInteractive: (الطريقة الافتراضية) تحميل السكربت بعد أن تغدو الصفحة تفاعلية مباشرة.
  • lazyOnload: تحميل السكربت أثناء فترة التوقف عن العمل idle.
  • worker: (تجريبية) تحميل السكربت في عامل ويب web worker.

استخدام استراتيجية beforeInteractive

تُدفع السكربتات التي تحمّل وفق هذه الاستراتيجية ضمن شيفرة HTML التي يوّلدها الخادم وتُنفَّذ قبل عملية التجميع الذاتي لشيفرة JavaScript. يجدر بك استخدام هذه الاستراتيجية مع السكربتات الحيوية التي ينبغي إحضارها وتنفيذها قبل أن يتمكن المستخدم من التفاعل مع الصفحة. تعمل هذه الاستراتيجية داخل الملف "document.js_" فقط، وقد صُمِّمت لتحميل السكربتات التي يحتاجها الموقع بأكمله (أي عندما يُفترض تحميل السكربت عند تحميل أي صفحة في التطبيق من جانب الخادم).

إن سبب عمل الاستراتيجية beforeInteractive ضمن الملف document.js_\ هو دعم التدفق المستمر والتفاعلي للبيانات، فمن المستحيل أن تضمن توقيت تنفيذ سكربتات beforeInteractive أو ترتيبها خارج هذا الملف.

// In _document.js
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <Script
          src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
          strategy="beforeInteractive"
        ></Script>
      </body>
    </Html>
  )
}

من السكربتات التي ينبغي تحملها وفق هذه الاستراتيجية نجد:

  • مكتشفات المؤتمِتات Bot detectors
  • مديرو قبول ملفات تعريف الارتباط.

استخدام استراتيجية afterInteractive

تُدفع بالسكربتات التي تستخدم هذه الاستراتيجية إلى جانب العميل وتُنفَّذ بعد أن ترطِّب Next.js الصفحة (بعد أن تحلل شيفرة JavaScript). ينبغي استخدام هذه الاستراتيجية مع السكربتات التي لا نحتاج إلى تحميلها بأقصى سرعة ويمكن أن نحضرها وننفذها بعد أن تغدو الصفحة تفاعلية مع المستخدم:

<Script
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: `
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer', 'GTM-XXXXXX');
  `,
  }}
/>

من السكربتات التي تُعد أمثلة جيدة عن هذه الحالة نجد:

  • مديرو الوسوم Tag managers
  • المحللات Analytics

استخدام الاستراتيجية lazyOnload

تُحمّل السكربتات وفق هذه الاستراتيجية بعد إحضار كل الموارد وأثناء وقت الراحة (التوقف عن العمل). ينبغي استخدام هذه الاستراتيجية في الخلفية أو للسكربتات ذات الأولوية المنخفضة التي لا حاجة لتحميها مباشرة قبل أو بعد أن تغدو الصفحة تفاعلية:

<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />

من السكربتات التي تُعد أمثلة جيدة عن هذه الحالة نجد:

  • الإضافات التي تدعم المحادثات.
  • أدوات الارتباط بمواقع التواصل الاجتماعي.

التحميل الجانبي للسكربت باستخدام عامل ويب (استراتيجية تجريبية)

ملاحظة: لا تزال هذه الاستراتيجية تجريبية وغير مستقرة وقد تسبب أخطاءً غير متوقعة في تطبيق لذك استخدمها بحذر.

يُحدَّد موقع السكربتات التي تستخدم هذه الاستراتيجية وتُنفَّذ بواسطة Partytown، وقد يُحسِّن ذلك أداء الموقع بتخصيص الخيط الأساسي لتنفيذ شيفرة التطبيق الأساسية. لا تزال هذه الاستراتيجية تجريبية، ولا يمكن استخدامها دون تمكين الراية nextScriptWorkers في الملف next.config.js:

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

نفّذ بعد ذلك أحد الأمرين npm run dev أو yarn dev وسترشدك Next.js خلال عملية تثبيت الحزم اللازمة لإتمام الأمر:

npm run dev

# سترى إرشادات كالتالي
#
# Please install Partytown by running:
#
#         npm install @builder.io/partytown
#
# ...

بعد أن يكتمل التثبيت، اجعل strategy="worker" لكي يُنسخ Partytown تلقائيًا إلى تطبيقك وتبدأ بتحميل السكربت جانبيًا ضمن خيط عامل ويب.

<Script src="https://example.com/analytics.js" strategy="worker" />

ينبغي الإشارة إلى وجود بعض الآثار الجانبية لتحميل سكربتات طرف آخر في عامل ويب، وبإمكانك العودة إلى توثيق Partytown لمعلومات أكثر.

تهيئة الاستراتيجية worker للعمل

على الرغم من عدم حاجة هذه الاستراتيجة إلى إعدادات خاصة لتعمل، يدعم Partytown استخدام كائن تهيئة config object لتعديل بعض إعداداته بما في ذلك نمط التنقيح debug وتوجيه الأحداث forwarding events ومسببات الأحداث triggers.

إن رغبت في إضافة إعدادات أخرى، بإمكانك تضمينها داخل المكوّن </ Head> الذي يُستخدم في ملف document.js_ مخصص:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          data-partytown-config
          dangerouslySetInnerHTML={{
            __html: `
              partytown = {
                lib: "/_next/static/~partytown/",
                debug: true
              };
            `,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

لا بد من تحقيق الشروط التالية إن أردت تعديل إعدادات Partytown:

  1. استخدام السمة data-partytown-config لإلغاء الإعدادات الافتراضية التي تستخدمها Next.js.
  2. استخدام الخاصية التالية "/lib: "/_next/static/~partytown ضمن كائن التهيئة لكي يعرف Partytown أين تخزّن Next.js الملفات الساكنة الضرورية. وهذا الأمر غير ضروري إن أردت تخزين ملفات مكتبة Partytown في مجلد مستقل.

ملاحظة: إن كنت تستخدم asset prefix وأردت تعديل إعدادات Partytown الافتراضية، عليك تضمينها كجزء من مسار الخاصية lib.

السكربتات السطرية في Next.js

يدعم المكوّن </ Script> السكربتات السطرية أو تلك التي لا تحمّل من ملفات خارجية. إذ يمكن كتابتها ضمن القوسين المعقوصين للمكوّن:

<Script id="show-banner" strategy="lazyOnload">
  {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

أو من خلال استعمال الخاصية dangerouslySetInnerHTML: 

<Script
  id="show-banner"
  dangerouslySetInnerHTML={{
    __html: `document.getElementById('banner').classList.remove('hidden')`,
  }}
/>

لا بد من استخدام الخاصية id في السكربتات السطرية كي تتبع Next.js السكربت وتحسن أداءه.

تنفيذ الشيفرة بعد التحميل onLoad في Next.js

ملاحظة: لا تستخدم كلتا الخاصيتين onLoad و onError مع استراتيجية التحميل beforeInteractive

تتطلب بعد السكربتات التي يقدمها طرف آخر تنفيذ شيفرة JavaScript بعد أن ينتهي تحميل تلك السكربتات، وذلك كي تنسخ محتوى معين أو تستدعي دالة. فإن كنت تستخدم إحدى استراتيجيتي التحميل afterInteractive أو lazyOnload بإمكانك تنفيذ الشيفرة بعد تحميلها من خلال استخدام الخاصية onLoad:

import { useState } from 'react'
import Script from 'next/script'

export default function Home() {
  const [stripe, setStripe] = useState(null)

  return (
    <>
      <Script
        id="stripe-js"
        src="https://js.stripe.com/v3/"
        onLoad={() => {
          setStripe({ stripe: window.Stripe('pk_test_12345') })
        }}
      />
    </>
  )
}

وقد يساعدك أحيانًا التقاط الأخطاء الناتجة عن فشل التحميل ومعالجتها باستخدام الخاصية onError:

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script
        id="will-fail"
        src="https://example.com/non-existant-script.js"
        onError={(e) => {
          console.error('Script failed to load', e)
        }}
      />
    </>
  )
}

استخدام سمات إضافية

لا يمكن استخدام العديد من سمات شجرة DOM الخاصة بالعنصر <script> مع المكوّن </ Script> مثل nonce أو سمات البيانات المخصصة. عند تضمين أية سمات إضافية ستُنقل تلقائيًا إلى العنصر <script> النهائي المحسّن والذي سيُنفّذ عند عرض الصفحة.

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script
        src="https://www.google-analytics.com/analytics.js"
        id="analytics"
        nonce="XUENAJFW"
        data-test="analytics"
      />
    </>
  )
}

المصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=Next.js/script&oldid=31953"