スクリプト最適化

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

すべてのルートでサードパーティスクリプトを読み込むには、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は、ユーザーが複数のページ間を移動しても、スクリプトが確実に1回だけ読み込まれるようにします。

推奨事項: パフォーマンスへの不要な影響を最小限に抑えるため、サードパーティスクリプトは特定のページまたはレイアウトにのみ含めることをお勧めします。

ストラテジー

next/scriptのデフォルトの動作では任意のページまたはレイアウトでサードパーティスクリプトを読み込むことができますが、strategyプロパティを使用して読み込み動作を微調整できます：

beforeInteractive: Next.jsのコードや任意のページのハイドレーションが発生する前にスクリプトを読み込みます。
afterInteractive: (デフォルト) ページの一部のハイドレーション後にスクリプトを早期に読み込みます。
lazyOnload: ブラウザのアイドル時間中にスクリプトを後で読み込みます。
worker: (実験的) スクリプトをウェブワーカーで読み込みます。

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

スクリプトをウェブワーカーにオフロードする（実験的）

警告: worker ストラテジーはまだ安定版ではなく、App Routerとはまだ連携していません。注意して使用してください。

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

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

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が自動的にインスタンス化され、スクリプトがウェブワーカーにオフロードされます。

pages/home.tsx

TypeScript

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

ウェブワーカーでサードパーティスクリプトを読み込む際には、いくつかのトレードオフを考慮する必要があります。詳細については、Partytownのトレードオフドキュメントをご覧ください。

カスタムPartytown設定の使用

workerストラテジーは追加の設定なしで動作しますが、Partytownは設定オブジェクトをサポートしており、debugモードの有効化やイベントとトリガーの転送など、いくつかの設定を変更できます。

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

_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属性を使用する必要があります
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: スクリプトの読み込みに失敗した場合にコードを実行します。

これらのハンドラは、next/script がインポートされ、最初の行に "use client" が定義されたクライアントコンポーネント内で使用される場合にのみ機能します：

pages/index.tsx

TypeScript

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>要素に転送されます。

pages/index.tsx

TypeScript

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