الواجهة البرمجية للمكون next/script في Next.js

ملاحظة: هذه الصفحة لتوثيق الواجهة البرمجية للمكوّن script، للاطلاع أكثر على الميزات ومعلومات الاستخدام عن السكربتات في Next.js راجع صفحة "التعامل مع السكربتات في Next.js" من هذا التوثيق.

خاصيات اختيارية

الخاصية src

وهي مسار نصي يحدد عنوان URL للسكربت الخارجي. يمكن أن يكون العنوان مطلق أو داخلي.

الخاصية strategy

وتحدد استراتيجية تحميل السكربت:

الخاصية strategy	الوصف
beforeInteractive	حمِّل السكربت قبل أن تغدو الصفحة تفاعلية مع المستخدم.
afterInteractive	حمِّل السكربت مباشرة بعد أن تغدو الصفحة تفاعلية.
lazyOnload	حمّل السكربت خلال فترة توقف التصفح (فترة الراحة).
worker	حمّل الصفحة في خيط عامل ويب web worker.

ملاحظة: الاستراتيجية هي استراتيجية تجريبية يمكن استخدامها فقط عندما تُفعَّل في الملف next.config.js. راجع صفحة "التعامل مع السكربتات في Next.js" من هذا التوثيق.

التابع onLoad

وهو تابع يعيد شيفرة JavaScript إضافية ينبغي تنفيذها بعد إنتهاء تحميل السكربت.

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

إليك مثالًا عن كيفية استخدام 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

وهو تابع يُنفَّذ إن فشل تحميل السكربت.

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

إليك مثالًا عن كيفية استخدام 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)
        }}
      />
    </>
  )
}

المصادر

• الصفحة Next/script من توثيق Next.js الرسمي.