スクリプト最適化

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

すべてのルートでサードパーティスクリプトを読み込むには、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: (実験的) スクリプトを Web Worker で読み込みます。

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

Web Worker へのスクリプトオフロード (実験的)

警告: worker ストラテジーはまだ安定しておらず、app ディレクトリでは動作しません。注意して使用してください。

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

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

next.config.js

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

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

Terminal

npm run dev

次のような指示が表示されます: npm install @builder.io/partytown を実行して 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" />
    </>
  )
}

import Script from 'next/script'

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

Web 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')`,
  }}
/>

警告: インラインスクリプトには、Next.js がスクリプトを追跡して最適化するために id プロパティを割り当てる必要があります。

追加コードの実行

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

追加属性

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

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"
      />
    </>
  )
}