スクリプトの最適化

レイアウトスクリプト

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

app/dashboard/layout.tsx

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は、ユーザーが同じレイアウト内の複数のルート間を移動した場合でも、スクリプトが一度だけロードされるようにします。

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

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

app/layout.tsx

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は、ユーザーが複数のページ間を移動した場合でも、スクリプトが一度だけロードされるようにします。

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

戦略

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

beforeInteractive: Next.jsのコードやページのハイドレーションが発生する前にスクリプトを読み込みます。
afterInteractive: (デフォルト) ページのハイドレーションが開始された後、スクリプトを早い段階で読み込みます。
lazyOnload: ブラウザのアイドル中にスクリプトを遅延ロードします。
worker: (実験的) スクリプトをウェブワーカーで読み込みます。

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

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

警告: 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がセットアップを完了するために必要なパッケージのインストールをガイドします。

ターミナル

npm run dev

次のような指示が表示されます: npm install @builder.io/partytownを実行してPartytownをインストールしてください。

セットアップが完了すると、strategy="worker"を定義することで、アプリケーションでPartytownが自動的にインスタンス化され、スクリプトがウェブワーカーにオフロードされます。

pages/home.tsx

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

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

追加属性

Scriptコンポーネントでは使用されない、<script>要素に割り当てることができるDOM属性が多数あります。たとえば、nonceやカスタムデータ属性などがあります。追加の属性を含めると、最終的に最適化されたHTMLに含まれる<script>要素に自動的に転送されます。

app/page.tsx

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