<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 の概要は以下のとおりです：

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

このストラテジーは、ページの一部がインタラクティブになる前にフェッチされる必要がある重要なスクリプトにのみ使用されるべきです。

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"
        strategy="beforeInteractive"
      />
    </html>
  )
}

Good to know：beforeInteractiveを持つスクリプトは、コンポーネント内のどこに配置されているかにかかわらず、常に HTML ドキュメントの head 内に注入されます。

beforeInteractiveでできるだけ早くロードされるべきスクリプトの例には、以下のようなものがあります：

ボット検知器
クッキーの同意管理

`afterInteractive`

afterInteractiveストラテジーを使用するスクリプトは、HTML クライアントサイドに注入され、ページ上で一部（またはすべて）のハイドレーションが発生した後にロードされます。これは Script コンポーネントのデフォルトのストラテジーで、できるだけ早くロードする必要があるスクリプトに使用します。

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ディレクトリではまだ動作しません。注意して使用してください。

workerストラテジーを使用するスクリプトは、メインスレッドを解放し、重要なファーストパーティのリソースのみが処理されるようにするため、Web Worker に移動されます。このストラテジーはどんなスクリプトにも使えますが、すべてのサードパーティ製スクリプトのサポートが保証されているわけではない、高度なユースケースです。

workerをストラテジーとして使用するには、next.config.jsでnextScriptWorkersフラグを有効にする必要があります：

next.config.js
module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

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

page/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 プロパティを使用すると、スクリプトが最初にロードされたときの load イベントの後にコードを実行し、その後コンポーネントが再マウントされるたびにコードを実行できます。

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

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

バージョン履歴

Version	Changes
`v13.0.0`	`beforeInteractive`と`afterInteractive`が`app`をサポートするために更新されました。
`v12.2.4`	`onReady` prop が追加されました。
`v12.2.2`	`beforeInteractive`属性をつけた`next/script`が`_document`に記述できるようになりました。
`v11.0.0`	`next/script`が導入されました。

Props​

必須の Props​

src​

任意の Props​

strategy​

beforeInteractive​

afterInteractive​

lazyOnload​

worker​

onLoad​

onReady​

onError​

バージョン履歴​