<Script>

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

app/dashboard/page.tsx

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`

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

`strategy`

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

beforeInteractive: Next.jsのコードとページのハイドレーションが行われる前に読み込みます。
afterInteractive: (デフォルト) ページのハイドレーションが一部行われた後、早期に読み込みます。
lazyOnload: ブラウザのアイドル時間中に読み込みます。
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`

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

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

onLoad

警告: onLoadはサーバーコンポーネントではまだ機能せず、クライアントコンポーネントでのみ使用できます。さらに、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はサーバーコンポーネントではまだ機能せず、クライアントコンポーネントでのみ使用できます。

サードパーティ製のスクリプトの中には、スクリプトの読み込みが完了した後、かつコンポーネントがマウントされるたびに（例えば、ルートナビゲーションの後）JavaScriptコードを実行する必要があるものがあります。`onReady`プロパティを使用すると、スクリプトのロードイベントの後、最初にロードされたときと、その後コンポーネントが再マウントされるたびにコードを実行できます。

コンポーネントがマウントされるたびにGoogle Maps 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はサーバーコンポーネントではまだ機能せず、クライアントコンポーネントでのみ使用できます。 `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`	`beforeInteractive`を使用した`next/script`を`_document`に配置できるようにしました。
`v11.0.0`	`next/script`が導入されました。

<Script>

src オプションのプロパティ

`src`