Script

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

import Script from 'next/script'

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

import Script from 'next/script'

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

Props

Scriptコンポーネントで利用可能なpropsの概要は以下の通りです：

Prop	例	型	必須
`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)内に配置する必要があり、サイト全体で必要なスクリプト（つまり、アプリケーション内の任意のページがサーバーサイドで読み込まれたときにスクリプトが読み込まれる）を読み込むように設計されています。

この戦略は、できるだけ早くフェッチする必要がある重要なスクリプトにのみ使用してください。

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

import Script from 'next/script'

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

知っておくと良い: beforeInteractiveのスクリプトは、コンポーネント内のどこに配置されていても、常にHTMLドキュメントのhead内に注入されます。

beforeInteractiveでできるだけ早くフェッチすべきスクリプトの例：

ボット検出器
クッキー同意管理ツール

`afterInteractive`

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/ディレクトリ内でのみ使用できます：

import Script from 'next/script'

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

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ライブラリが読み込まれた後にのみlodashメソッドを実行する例です。

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

'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プロパティを使用して、スクリプトのloadイベント時に最初にコードを実行し、その後すべてのコンポーネントの再マウント時に実行できます。

以下は、Google Maps JS埋め込みをコンポーネントがマウントされるたびに再インスタンス化する方法の例です：

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

'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プロパティで処理できます：

'use client'

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onError={(e: Error) => {
          console.error('スクリプトの読み込みに失敗しました', e)
        }}
      />
    </>
  )
}

'use client'

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onError={(e) => {
          console.error('スクリプトの読み込みに失敗しました', e)
        }}
      />
    </>
  )
}

バージョン履歴

バージョン	変更内容
`v13.0.0`	`beforeInteractive`と`afterInteractive`が`app`をサポートするように変更
`v12.2.4`	`onReady`プロパティ追加
`v12.2.2`	`next/script`を`beforeInteractive`で`_document`内に配置可能に
`v11.0.0`	`next/script`導入

On this page