Script

この API リファレンスでは、Script コンポーネントで利用可能な props の使用方法について説明します。機能と使用方法については、スクリプトの最適化ページをご覧ください。

app/dashboard/page.tsx

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

Props

Script コンポーネントで利用可能な props の概要を以下に示します。

プロパティ	例	型	必須
`src`	`src="http://example.com/script"`	String	インラインスクリプトを使用しない限り必須
`strategy`	`strategy="lazyOnload"`	String	-
`onLoad`	`onLoad={onLoadFunc}`	Function	-
`onReady`	`onReady={onReadyFunc}`	Function	-
`onError`	`onError={onErrorFunc}`	Function	-

必須 Props

<Script /> コンポーネントは以下のプロパティを必要とします。

`src`

外部スクリプトの URL を指定するパス文字列。これは、絶対的な外部 URL または内部パスのいずれかです。src プロパティは、インラインスクリプトを使用しない限り必須です。

オプション Props

<Script /> コンポーネントは、必須のプロパティに加えて、いくつかの追加プロパティを受け入れます。

`strategy`

スクリプトの読み込み戦略。4つの異なる戦略を使用できます。

beforeInteractive: Next.js のコードやページのハイドレーションが発生する前に読み込みます。
afterInteractive: (デフォルト) 早く読み込みますが、ページで一部のハイドレーションが発生した後です。
lazyOnload: ブラウザのアイドル中に読み込みます。
worker: (実験的) Web Worker で読み込みます。

`beforeInteractive`

beforeInteractive ストラテジーで読み込まれるスクリプトは、サーバーから初期 HTML に挿入され、Next.js モジュールより前にダウンロードされ、配置された順序で実行されます。

この戦略で指定されたスクリプトは、ファーストパーティのコードより前にプリロードおよびフェッチされますが、その実行はページのハイドレーションの発生をブロックしません。

beforeInteractive スクリプトは、ルートレイアウト (app/layout.tsx) 内に配置する必要があり、サイト全体で必要とされるスクリプト (つまり、アプリケーション内の任意のページがサーバーサイドで読み込まれたときにスクリプトが読み込まれる) を読み込むように設計されています。

この戦略は、できるだけ早くフェッチする必要があるクリティカルなスクリプトにのみ使用すべきです。

app/layout.tsx

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

補足: beforeInteractive のスクリプトは、コンポーネント内のどこに配置されていても、常に HTML ドキュメントの head 内に挿入されます。

beforeInteractive を使用してできるだけ早くフェッチすべきスクリプトの例としては、以下のようなものがあります。

ボット検出器
Cookie 同意マネージャー

afterInteractive ストラテジーを使用するスクリプトは、クライアントサイドで HTML に挿入され、ページ上で一部 (またはすべて) のハイドレーションが発生した後にロードされます。これは Script コンポーネントのデフォルト戦略です。ファーストパーティの Next.js コードより前にロードする必要はないが、できるだけ早くロードする必要があるスクリプトに使用すべきです。

afterInteractive スクリプトは、任意のページまたはレイアウト内に配置でき、そのページ (またはページのグループ) がブラウザで開かれたときにのみロードおよび実行されます。

app/page.js

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

afterInteractive に適したスクリプトの例としては、以下のようなものがあります。

タグマネージャー
アナリティクス

`lazyOnload`

lazyOnload ストラテジーを使用するスクリプトは、ブラウザのアイドル中にクライアントサイドで HTML に挿入され、ページ上のすべてのリソースがフェッチされた後にロードされます。この戦略は、早期にロードする必要のない、バックグラウンドまたは低優先度のスクリプトに使用すべきです。

lazyOnload スクリプトは、任意のページまたはレイアウト内に配置でき、そのページ (またはページのグループ) がブラウザで開かれたときにのみロードおよび実行されます。

app/page.js

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

すぐにロードする必要がなく、lazyOnload でフェッチできるスクリプトの例としては、以下のようなものがあります。

チャットサポートプラグイン
ソーシャルメディアウィジェット

`worker`

警告: worker ストラテジーはまだ安定しておらず、App Router ではまだ動作しません。注意して使用してください。

worker ストラテジーを使用するスクリプトは、メインスレッドを解放し、クリティカルなファーストパーティのリソースのみが処理されるように、Web Worker にオフロードされます。この戦略はどのスクリプトにも使用できますが、すべてのサードパーティスクリプトをサポートすることは保証されていない高度なユースケースです。

worker を戦略として使用するには、next.config.js で nextScriptWorkers フラグを有効にする必要があります。

next.config.js

module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

worker スクリプトは、現在 pages/ ディレクトリ内でのみ使用できます。

pages/home.tsx

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

`onLoad`

警告: onLoad は Server Components ではまだ動作せず、Client Components でのみ使用できます。さらに、onLoad は beforeInteractive と一緒に使用できません — 代わりに onReady を使用することを検討してください。

一部のサードパーティスクリプトでは、コンテンツをインスタンス化したり関数を呼び出したりするために、スクリプトの読み込みが完了した後にユーザーが JavaScript コードを実行する必要があります。読み込み戦略として afterInteractive または lazyOnload を使用してスクリプトをロードしている場合、onLoad プロパティを使用してロード後にコードを実行できます。

ライブラリがロードされた後にのみ Lodash メソッドを実行する例を以下に示します。

app/page.tsx

'use client'
 
import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script
        src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
        onLoad={() => {
          console.log(_.sample([1, 2, 3, 4]))
        }}
      />
    </>
  )
}

`onReady`

警告: onReady は Server Components ではまだ動作せず、Client Components でのみ使用できます。

一部のサードパーティスクリプトでは、スクリプトの読み込みが完了した後、およびコンポーネントがマウントされるたびに (例えばルートナビゲーションの後など) JavaScript コードを実行する必要があります。onReady プロパティを使用すると、スクリプトの初回読み込み時のロードイベント後、およびその後のコンポーネント再マウントごとにコードを実行できます。

コンポーネントがマウントされるたびに Google マップ JS の埋め込みを再インスタンス化する方法の例を以下に示します。

app/page.tsx

'use client'
 
import { useRef } from 'react'
import Script from 'next/script'
 
export default function Page() {
  const mapRef = useRef()
 
  return (
    <>
      <div ref={mapRef}></div>
      <Script
        id="google-maps"
        src="https://maps.googleapis.com/maps/api/js"
        onReady={() => {
          new google.maps.Map(mapRef.current, {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8,
          })
        }}
      />
    </>
  )
}

`onError`

警告: onError は Server Components ではまだ動作せず、Client Components でのみ使用できます。onError は beforeInteractive 読み込み戦略では使用できません。

スクリプトの読み込みに失敗した場合にそれを捕捉すると便利なことがあります。これらのエラーは onError プロパティで処理できます。

app/page.tsx

'use client'
 
import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onError={(e: Error) => {
          console.error('Script failed to load', e)
        }}
      />
    </>
  )
}

バージョン履歴

バージョン	変更点
`v13.0.0`	`beforeInteractive` と `afterInteractive` が `app` をサポートするように変更されました。
`v12.2.4`	`onReady` プロパティが追加されました。
`v12.2.2`	`next/script` を `_document` に `beforeInteractive` と一緒に配置することを許可。
`v11.0.0`	`next/script` が導入されました。