スクリプトのロードと最適化方法

アプリケーションスクリプト

すべてのルートでサードパーティスクリプトをロードするには、next/script をインポートし、カスタム _app にスクリプトを直接含めます。

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: （実験的）Web Worker でスクリプトをロードします。

各戦略とそのユースケースについて詳しくは、next/script API リファレンスドキュメントを参照してください。

スクリプトを Web Worker にオフロードする（実験的）

警告: worker 戦略はまだ安定しておらず、App Routerではまだ動作しません。注意して使用してください。

worker 戦略を使用するスクリプトは、Partytown を使用した Web Worker でオフロードおよび実行されます。これにより、メインスレッドをアプリケーションの他のコードに専念させ、サイトのパフォーマンスを向上させることができます。

この戦略はまだ実験的であり、next.config.js で nextScriptWorkers フラグが有効になっている場合にのみ使用できます。

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

次に、next （通常は npm run dev または yarn dev）を実行すると、Next.js がセットアップを完了するために必要なパッケージのインストールを案内します。

npm run dev

「Partytown を npm install @builder.io/partytown を実行してインストールしてください」のような指示が表示されます。

セットアップが完了すると、strategy="worker" を定義することで、Partytown がアプリケーションで自動的にインスタンス化され、スクリプトが Web Worker にオフロードされます。

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

Web Worker でサードパーティスクリプトをロードする際には、考慮すべきトレードオフがいくつかあります。詳細については、Partytown のトレードオフドキュメントを参照してください。

カスタム Partytown 設定の使用

worker 戦略は追加の設定なしで機能しますが、Partytown は設定オブジェクトを使用して、debug モードの有効化やイベントおよびトリガーの転送など、一部の設定を変更することをサポートしています。

追加の設定オプションを追加したい場合は、カスタム _document.js で使用する <Head /> コンポーネント内に含めることができます。

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 の設定を変更するには、以下の条件を満たす必要があります。

Next.js が使用するデフォルト設定を上書きするには、data-partytown-config 属性を使用する必要があります。
Partytown のライブラリファイルを別のディレクトリに保存しない限り、Next.js が必要な静的ファイルをどこに保存しているかを Partytown に知らせるために、設定オブジェクトに lib: "/_next/static/~partytown/" プロパティと値を含める必要があります。

注意: アセットプレフィックスを使用しており、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')`,
  }}
/>

警告: インラインスクリプトの場合、Next.js がスクリプトを追跡および最適化できるように、id プロパティを割り当てる必要があります。

追加コードの実行

イベントハンドラは Script コンポーネントと組み合わせて使用でき、特定のイベントが発生した後にコードを実行できます。

onLoad: スクリプトのロードが完了した後、コードを実行します。
onReady: スクリプトのロードが完了した後、およびコンポーネントがマウントされるたびにコードを実行します。
onError: スクリプトのロードに失敗した場合、コードを実行します。

これらのハンドラは、"use client" がコードの最初の行として定義されている Client Component 内で next/script がインポートされ、使用されている場合にのみ機能します。

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 API リファレンスを参照してください。

追加属性

Script コンポーネントでは使用されない、<script> 要素に割り当てることができる DOM 属性は多数あります。例えば、nonce やカスタムデータ属性などがあります。追加の属性を含めると、最終的に最適化された <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"
      />
    </>
  )
}