Роутер страниц: Сторонний JavaScript

Сторонний JavaScript относится к любым скриптам, добавленным из внешних источников. Обычно сторонние скрипты включают для добавления функциональности на сайт без необходимости писать её с нуля, например, аналитику, рекламу или виджеты поддержки клиентов.

Добавление стороннего JavaScript

Давайте рассмотрим, как добавить сторонний скрипт на страницу Next.js.

Откройте файл pages/posts/first-post.js в редакторе и найдите следующие строки:

<Head>
  <title>First Post</title>
</Head>

Помимо метаданных, скрипты, которые нужно загрузить и выполнить как можно скорее, обычно добавляются в <head> страницы. Используя обычный HTML-элемент <script>, внешний скрипт можно добавить следующим образом:

<Head>
  <title>First Post</title>
  <script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>

Этот скрипт содержит Facebook SDK, который часто используется для добавления социальных плагинов Facebook и другой функциональности. Хотя такой подход работает, включение скриптов таким образом не даёт чёткого представления о том, когда они загрузятся относительно другого JavaScript-кода на странице. Если скрипт блокирует отрисовку и может задержать загрузку контента, это может значительно повлиять на производительность.

Использование компонента Script

next/script — это расширение HTML-элемента <script>, которое оптимизирует время загрузки и выполнения дополнительных скриптов.

В том же файле добавьте импорт Script из next/script в начале файла:

import Script from 'next/script';

Теперь обновите компонент FirstPost, включив в него компонент Script:

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

Обратите внимание, что в компоненте Script определены несколько дополнительных свойств:

strategy управляет временем загрузки стороннего скрипта. Значение lazyOnload указывает Next.js загружать этот скрипт лениво во время простоя браузера
onLoad используется для выполнения JavaScript-кода сразу после загрузки скрипта. В этом примере мы выводим сообщение в консоль о том, что скрипт успешно загрузился

Попробуйте открыть http://localhost:3000/posts/first-post. Используя инструменты разработчика браузера, вы должны увидеть сообщение выше в панели Console. Кроме того, можно выполнить window.FB, чтобы убедиться, что скрипт заполнил эту глобальную переменную.

Примечание: Facebook SDK использовался только как пример для демонстрации производительного способа добавления сторонних скриптов в приложение. Теперь, когда вы понимаете основы включения сторонней функциональности в Next.js, вы можете удалить компонент Script из FirstPost перед продолжением.

Чтобы узнать больше о компоненте Script, ознакомьтесь с документацией.

Сторонний JavaScript

Добавление стороннего JavaScript

Использование компонента Script

On this page