Загрузка и оптимизация скриптов

Скрипты приложения

Для загрузки стороннего скрипта для всех маршрутов импортируйте next/script и включите скрипт непосредственно в ваш кастомный _app:

pages/_app.js

import Script from 'next/script'

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

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

Рекомендация: Мы рекомендуем включать сторонние скрипты только на конкретных страницах или в макетах, чтобы минимизировать влияние на производительность.

Стратегии загрузки

Хотя поведение next/script по умолчанию позволяет загружать сторонние скрипты на любой странице или в макете, вы можете точно настроить его поведение с помощью свойства strategy:

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

Обратитесь к документации next/script для получения подробной информации о каждой стратегии и случаях их использования.

Выгрузка скриптов в веб-воркер (экспериментально)

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

Скрипты, использующие стратегию 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 о компромиссах.

Использование кастомной конфигурации Partytown

Хотя стратегия worker не требует дополнительной настройки для работы, Partytown поддерживает использование объекта конфигурации для изменения некоторых параметров, включая включение режима debug и пересылку событий и триггеров.

Если вы хотите добавить дополнительные параметры конфигурации, вы можете включить их в компонент <Head />, используемый в кастомном _document.js:

_pages/document.jsx

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          data-partytown-config
          dangerouslySetInnerHTML={{
            __html: `
              partytown = {
                lib: "/_next/static/~partytown/",
                debug: true
              };
            `,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Для изменения конфигурации Partytown должны быть выполнены следующие условия:

Атрибут data-partytown-config должен быть использован для переопределения конфигурации по умолчанию, используемой Next.js
Если вы не решите сохранять файлы библиотеки Partytown в отдельном каталоге, свойство lib: "/_next/static/~partytown/" должно быть включено в объект конфигурации, чтобы Partytown знал, где Next.js хранит необходимые статические файлы.

Примечание: Если вы используете префикс ассетов и хотите изменить конфигурацию Partytown по умолчанию, вы должны включить его в путь lib.

Ознакомьтесь с опциями конфигурации 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" указан в первой строке кода:

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 для получения подробной информации о каждом обработчике событий и примеров.

Дополнительные атрибуты

Существует множество DOM-атрибутов, которые могут быть назначены элементу <script> и не используются компонентом Script, например nonce или пользовательские data-атрибуты. Включение любых дополнительных атрибутов автоматически перенаправит их в финальный оптимизированный элемент <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"
      />
    </>
  )
}