スクリプトの読み込みと最適化方法

レイアウトスクリプト

複数のルートでサードパーティスクリプトを読み込むには、next/script をインポートし、レイアウトコンポーネントに直接スクリプトを含めます。

import Script from 'next/script'
 
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <section>{children}</section>
      <Script src="https://example.com/script.js" />
    </>
  )
}

サードパーティスクリプトは、ユーザーがフォルダルート（例：dashboard/page.js）またはネストされたルート（例：dashboard/settings/page.js）にアクセスしたときに取得されます。Next.jsは、ユーザーが同じレイアウト内の複数のルート間を移動しても、スクリプトが1回だけ読み込まれることを保証します。

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

すべてのルートでサードパーティスクリプトを読み込むには、next/script をインポートし、ルートレイアウトに直接スクリプトを含めます。

import Script from 'next/script'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script src="https://example.com/script.js" />
    </html>
  )
}

このスクリプトは、アプリケーション内の*いずれかの*ルートにアクセスされたときに読み込まれて実行されます。Next.jsは、ユーザーが複数のページ間を移動しても、スクリプトが1回だけ読み込まれることを保証します。

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

戦略

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

次のような指示が表示されます：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" />
    </>
  )
}

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" がコードの最初の行として定義されているクライアントコンポーネント内で使用される場合にのみ機能します。

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

各イベントハンドラーと例については、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"
      />
    </>
  )
}

APIリファレンス

next/script APIの詳細を学ぶ。

Script Component

組み込みの `next/script` コンポーネントを使用して、Next.jsアプリケーションのサードパーティスクリプトを最適化します。