تحسين النصوص البرمجية

نصوص برمجية للتخطيط

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

import Script from 'next/script'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <section>{children}</section>
      <Script src="https://example.com/script.js" />
    </>
  )
}

import Script from 'next/script'

export default function DashboardLayout({ children }) {
  return (
    <>
      <section>{children}</section>
      <Script src="https://example.com/script.js" />
    </>
  )
}

يتم جلب النص البرمجي لجهة خارجية عند الوصول إلى مسار المجلد (مثل dashboard/page.js) أو أي مسار متداخل (مثل dashboard/settings/page.js) من قبل المستخدم. سيتأكد Next.js من تحميل النص البرمجي مرة واحدة فقط، حتى إذا انتقل المستخدم بين عدة مسارات في نفس التخطيط.

نصوص برمجية للتطبيق

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

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script src="https://example.com/script.js" />
    </html>
  )
}

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script src="https://example.com/script.js" />
    </html>
  )
}

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

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

الاستراتيجية

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

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

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

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

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

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

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

next.config.js

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

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

Terminal

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 لمزيد من المعلومات.

نصوص برمجية مضمنة

النصوص البرمجية المضمنة، أو النصوص البرمجية غير المحملة من ملف خارجي، مدعومة أيضًا بواسطة مكون 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" كأول سطر من الكود:

'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')
        }}
      />
    </>
  )
}

'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')
        }}
      />
    </>
  )
}

راجع مرجع 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"
      />
    </>
  )
}

Script

تحسين استخدام البرامج النصية (scripts) لجهات خارجية في تطبيق Next.js باستخدام مكون `next/script` المدمج.