<Script>

Это справочник по API, который поможет вам понять, как использовать свойства, доступные для компонента Script. Для получения информации о функциях и использовании см. страницу Оптимизация скриптов.

import Script from 'next/script'
 
export default function Dashboard() {
  return (
    <>
      <Script src="https://example.com/script.js" />
    </>
  )
}

Свойства

Вот сводка свойств, доступных для компонента Script:

Свойство	Пример	Тип	Обязательное
`src`	`src="http://example.com/script"`	Строка	Обязательное, если не используется встроенный скрипт
`strategy`	`strategy="lazyOnload"`	Строка	-
`onLoad`	`onLoad={onLoadFunc}`	Функция	-
`onReady`	`onReady={onReadyFunc}`	Функция	-
`onError`	`onError={onErrorFunc}`	Функция	-

Обязательные свойства

Компонент <Script /> требует следующих свойств.

src

Строка пути, указывающая URL внешнего скрипта. Это может быть как абсолютный внешний URL, так и внутренний путь. Свойство src является обязательным, если не используется встроенный скрипт.

Необязательные свойства

Компонент <Script /> принимает ряд дополнительных свойств помимо обязательных.

strategy

Стратегия загрузки скрипта. Существует четыре различных стратегии:

beforeInteractive: Загрузить перед любым кодом Next.js и перед любой загрузкой страницы.
afterInteractive: (по умолчанию) Загрузить рано, но после некоторой загрузки страницы.
lazyOnload: Загрузить во время простоя браузера.
worker: (экспериментально) Загрузить в веб-рабочем процессе.

beforeInteractive

Скрипты, загружаемые со стратегией beforeInteractive встраиваются в начальный HTML из сервера, загружаются до любого модуля Next.js и выполняются в порядке, в котором они размещены до любой загрузки страницы.

Скрипты с этой стратегией предварительно загружаются и извлекаются до любого кода первой стороны, но их выполнение не блокирует загрузку страницы.

Скрипты с beforeInteractive должны быть размещены внутри корневого макета (app/layout.tsx) и предназначены для загрузки скриптов, необходимых для всего сайта (т.е. скрипт загрузится, когда любая страница приложения была загружена на стороне сервера).

Эту стратегию следует использовать только для критически важных скриптов, которые необходимо загрузить до того, как какая-либо часть страницы станет интерактивной.

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

Важно знать: Скрипты со стратегией beforeInteractive всегда будут встраиваться внутри head HTML-документа независимо от того, где они размещены в компоненте.

Некоторые примеры скриптов, которые должны загружаться как можно скорее с помощью beforeInteractive:

Обнаружение ботов
Управление согласием на cookie

afterInteractive

Скрипты, использующие стратегию afterInteractive встраиваются в HTML на стороне клиента и загружаются после того, как произойдет (или произойдет) загрузка некоторых страниц на странице. Это стратегия по умолчанию компонента Script и должна использоваться для любого скрипта, который должен загрузиться как можно скорее, но не раньше любого кода первой стороны Next.js.

Скрипты с afterInteractive могут быть размещены на любой странице или макете и будут загружены и выполнены только тогда, когда эта страница (или группа страниц) откроется в браузере.

import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="afterInteractive" />
    </>
  )
}

Некоторые примеры скриптов, которые подходят для afterInteractive:

Менеджеры тегов
Аналитика

lazyOnload

Скрипты, использующие стратегию lazyOnload встраиваются в HTML на стороне клиента во время простоя браузера и загружаются после того, как все ресурсы на странице будут получены. Эта стратегия должна использоваться для любых фоновых или низкоприоритетных скриптов, которым не нужна ранняя загрузка.

Скрипты с lazyOnload могут быть размещены на любой странице или макете и будут загружены и выполнены только тогда, когда эта страница (или группа страниц) откроется в браузере.

import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="lazyOnload" />
    </>
  )
}

Примеры скриптов, которым не нужна немедленная загрузка и которые можно получить с помощью lazyOnload:

Плагины поддержки чата
Виджеты социальных сетей

worker

Предупреждение: Стратегия worker еще не стабильна и пока не работает с app каталогом. Используйте с осторожностью.

Скрипты, использующие стратегию worker, перекладываются на веб-рабочий процесс, чтобы освободить основной поток и гарантировать, что только критически важные ресурсы первой стороны обрабатываются в нем. Хотя эту стратегию можно использовать для любого скрипта, это продвинутый случай использования, который не гарантирует поддержку всех сторонних скриптов.

Чтобы использовать worker в качестве стратегии, флаг nextScriptWorkers должен быть включен в next.config.js:

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

Скрипты с worker сейчас могут использоваться только в каталоге pages/:

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

onLoad

Предупреждение: onLoad пока не работает с серверными компонентами и может использоваться только в клиентских компонентах. Кроме того, onLoad нельзя использовать с beforeInteractive – рассмотрите использование onReady вместо этого.

Некоторые сторонние скрипты требуют, чтобы пользователи выполняли код JavaScript один раз после завершения загрузки скрипта для инициализации контента или вызова функции. Если вы загружаете скрипт с послеInteractive или lazyOnload в качестве стратегии загрузки, вы можете выполнить код после его загрузки с помощью свойства onLoad.

Вот пример выполнения метода lodash только после загрузки библиотеки.

'use client'
 
import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script
        src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
        onLoad={() => {
          console.log(_.sample([1, 2, 3, 4]))
        }}
      />
    </>
  )
}

onReady

Предупреждение: onReady пока не работает с серверными компонентами и может использоваться только в клиентских компонентах.

Некоторые сторонние скрипты требуют, чтобы пользователи выполняли код JavaScript после завершения загрузки скрипта и каждый раз при монтировании компонента (например, после перехода по маршруту). Вы можете выполнить код после события загрузки скрипта при первой загрузке, а затем после каждого последующего повторного монтирования компонента, используя свойство onReady.

Вот пример того, как повторно инициализировать встроенное приложение Google Maps JS каждый раз при монтировании компонента:

'use client'
 
import { useRef } from 'react'
import Script from 'next/script'
 
export default function Page() {
  const mapRef = useRef()
 
  return (
    <>
      <div ref={mapRef}></div>
      <Script
        id="google-maps"
        src="https://maps.googleapis.com/maps/api/js"
        onReady={() => {
          new google.maps.Map(mapRef.current, {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8,
          })
        }}
      />
    </>
  )
}

onError

Предупреждение: onError пока не работает с серверными компонентами и может использоваться только в клиентских компонентах. onError нельзя использовать со стратегией загрузки beforeInteractive.

Иногда полезно перехватывать ошибки загрузки скрипта. Эти ошибки можно обработать с помощью свойства onError:

'use client'
 
import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onError={(e: Error) => {
          console.error('Script failed to load', e)
        }}
      />
    </>
  )
}

История версий

Версия	Изменения
`v13.0.0`	`beforeInteractive` и `afterInteractive` изменены для поддержки `app`.
`v12.2.4`	Добавлено свойство `onReady` .
`v12.2.2`	Разрешить `next/script` с `beforeInteractive` размещать в `_document`.
`v11.0.0`	Введено `next/script` .