Оптимизация скриптов

Скрипты в макетах (Layouts)

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

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

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

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

Многие 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"
      />
    </>
  )
}

Script

Оптимизация сторонних скриптов в вашем Next.js-приложении с помощью встроенного компонента `next/script`.