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

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

لتحميل نص برمجي لطرف ثالث لعدة مسارات، استورد 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 ليست مستقرة بعد ولا تعمل مع موجه التطبيق. استخدم بحذر.

يتم تفريغ النصوص البرمجية التي تستخدم استراتيجية 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` المدمج.