<Script>

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

app/dashboard/page.tsx

TypeScript

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

プロパティ

Script コンポーネントで利用可能なプロパティの概要は次のとおりです：

プロパティ	例	型	必須
`src`	`src="http://example.com/script"`	文字列	インラインスクリプトを使用しない場合に必要
`strategy`	`strategy="lazyOnload"`	文字列	-
`onLoad`	`onLoad={onLoadFunc}`	関数	-
`onReady`	`onReady={onReadyFunc}`	関数	-
`onError`	`onError={onErrorFunc}`	関数	-

必須プロパティ

<Script />コンポーネントには、以下のプロパティが必要です。

`src`

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

オプションプロパティ

<Script />コンポーネントは、必須プロパティ以外にも多くのプロパティを受け入れます。

`strategy`

スクリプトの読み込み戦略。使用できる戦略は4種類あります：

beforeInteractive: Next.jsのコードや任意のページのハイドレーションが発生する前に読み込みます。
afterInteractive: (デフォルト) ページ上のいくつかのハイドレーション後に早期に読み込みます。
lazyOnload: ブラウザのアイドル時間中に読み込みます。
worker: (実験的) Web ワーカーで読み込みます。

`beforeInteractive`

beforeInteractive戦略で読み込むスクリプトは、サーバーからの初期HTMLに注入され、任意のNext.jsモジュールより前にダウンロードされ、ページのハイドレーション前に配置された順序で実行されます。

この戦略のスクリプトは、事前に読み込まれ、任意の一次コードより前にフェッチされますが、その実行はページのハイドレーションをブロックしません。

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

この戦略は、ページの一部でも対話可能になる前にフェッチする必要のある重要なスクリプトにのみ使用する必要があります。

app/layout.tsx

TypeScript

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スクリプトの例：

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

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

worker戦略を使用するスクリプトは、メインスレッドを解放し、クリティカルな一次リソースのみを処理することを保証するために、Web ワーカーにオフロードされます。この戦略は任意のスクリプトに使用できますが、すべてのサードパーティスクリプトをサポートすることは保証されていない高度な使用例です。

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

next.config.js

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

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

pages/home.tsx

TypeScript

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

TypeScript

'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 Maps JS 埋め込みを再インスタンス化する例は以下の通りです：

app/page.tsx

TypeScript

'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

TypeScript

'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`	`beforeInteractive` を使用した `next/script` を `_document` に配置できるようになりました。
`v11.0.0`	`next/script` が導入されました。