Menu

スクリプト最適化

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

すべてのルートでサードパーティスクリプトを読み込むには、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ディレクトリでは機能しません。注意して使用してください。

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

  1. デフォルトの設定を上書きするには、data-partytown-config属性を使用する必要があります
  2. 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"
      />
    </>
  )
}