Menu

スクリプトの最適化

レイアウトスクリプト

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

app/dashboard/layout.tsx
TypeScript
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をインポートし、スクリプトをルートレイアウトに直接含めます：

app/layout.tsx
TypeScript
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: (実験的) スクリプトをウェブワーカーで読み込みます。

各ストラテジーとその使用例の詳細については、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のトレードオフドキュメントをご覧ください。

インラインスクリプト

外部ファイルから読み込まれないインラインスクリプトも、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" が定義されたクライアントコンポーネント内で使用される場合にのみ機能します：

app/page.tsx
TypeScript
'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>要素に転送されます。

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

APIリファレンス

next/scriptのAPIについてさらに詳しく学びます。

<Script>

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