تحسين البرامج النصية (Scripts)

نصوص البرمجة للتطبيق (Application Scripts)

لتحميل نص برمجي لجهة خارجية لجميع المسارات، استورد next/script وقم بتضمين النص البرمجي مباشرة في _app المخصص الخاص بك:

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://example.com/script.js" />
    </>
  )
}

سيتم تحميل وتنفيذ هذا النص البرمجي عند الوصول إلى أي مسار في تطبيقك. سيضمن Next.js أن النص البرمجي سيتم تحميله مرة واحدة فقط، حتى إذا تنقل المستخدم بين عدة صفحات.

التوصية: نوصي بتضمين النصوص البرمجية لجهات خارجية في صفحات أو تخطيطات محددة فقط لتقليل أي تأثير غير ضروري على الأداء.

الاستراتيجية (Strategy)

على الرغم من أن السلوك الافتراضي لـ next/script يسمح لك بتحميل النصوص البرمجية لجهات خارجية في أي صفحة أو تخطيط، يمكنك ضبط سلوك التحميل باستخدام خاصية strategy:

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

راجع وثائق مرجع next/script API لمعرفة المزيد عن كل استراتيجية وحالات استخدامها.

تفريغ النصوص البرمجية إلى عامل ويب (تجريبي)

تحذير: استراتيجية worker ليست مستقرة بعد ولا تعمل مع دليل app. استخدم بحذر.

يتم تفريغ النصوص البرمجية التي تستخدم استراتيجية worker وتنفيذها في عامل ويب باستخدام Partytown. يمكن أن يحسن هذا من أداء موقعك من خلال تخصيص الخيط الرئيسي لبقية كود التطبيق الخاص بك.

لا تزال هذه الاستراتيجية تجريبية ويمكن استخدامها فقط إذا تم تمكين علم nextScriptWorkers في next.config.js:

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

ثم، قم بتشغيل next (عادة npm run dev أو yarn dev) وسيرشدك Next.js خلال تثبيت الحزم المطلوبة لإكمال الإعداد:

npm run dev

سترى تعليمات مثل هذه: يرجى تثبيت Partytown عن طريق تشغيل npm install @builder.io/partytown

بمجرد اكتمال الإعداد، سيؤدي تعريف strategy="worker" إلى إنشاء Partytown تلقائيًا في تطبيقك وتفريغ النص البرمجي إلى عامل ويب.

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="worker" />
    </>
  )
}

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="worker" />
    </>
  )
}

هناك عدد من المقايضات التي يجب مراعاتها عند تحميل نص برمجي لجهة خارجية في عامل ويب. يرجى الاطلاع على وثائق المقايضات لـ Partytown لمزيد من المعلومات.

النصوص البرمجية المضمنة (Inline Scripts)

النصوص البرمجية المضمنة، أو النصوص البرمجية غير المحملة من ملف خارجي، مدعومة أيضًا بواسطة مكون Script. يمكن كتابتها بوضع JavaScript داخل الأقواس المعقوفة:

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

أو باستخدام خاصية dangerouslySetInnerHTML:

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

تحذير: يجب تعيين خاصية id للنصوص البرمجية المضمنة حتى يتمكن Next.js من تتبع وتحسين النص البرمجي.

تنفيذ كود إضافي

يمكن استخدام معالجات الأحداث مع مكون Script لتنفيذ كود إضافي بعد حدوث حدث معين:

• onLoad: تنفيذ الكود بعد انتهاء تحميل النص البرمجي.
• onReady: تنفيذ الكود بعد انتهاء تحميل النص البرمجي وكلما تم تركيب المكون.
• onError: تنفيذ الكود إذا فشل تحميل النص البرمجي.

ستعمل هذه المعالجات فقط عند استيراد next/script واستخدامه داخل مكون العميل حيث يتم تعريف "use client" كأول سطر من الكود:

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onLoad={() => {
          console.log('Script has loaded')
        }}
      />
    </>
  )
}

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onLoad={() => {
          console.log('Script has loaded')
        }}
      />
    </>
  )
}

راجع مرجع next/script API لمعرفة المزيد عن كل معالج حدث وعرض الأمثلة.

سمات إضافية

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

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        id="example-script"
        nonce="XUENAJFW"
        data-test="script"
      />
    </>
  )
}

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        id="example-script"
        nonce="XUENAJFW"
        data-test="script"
      />
    </>
  )
}