メインコンテンツまでスキップ

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

PropExampleTypeRequired
srcsrc="http://example.com/script"StringRequired unless inline script is used
strategystrategy="lazyOnload"String-
onLoadonLoad={onLoadFunc}Function-
onReadyonReady={onReadyFunc}Function-
onErroronError={onErrorFunc}Function-

必須のProps​

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

src​

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

オプションのProps​

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

strategy​

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

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

beforeInteractive​

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

この戦略で指定されたスクリプトは、最初のパーティコードの前にプリロードされてフェッチされますが、その実行はページのハイドレーションが発生するのを妨げません。

beforeInteractiveスクリプトはroot レイアウト（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>
  )
}

Good to know: 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​

Warning: worker戦略はまだ安定しておらず、App Routerではまだ動作しません。注意して使用してください。

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​

Warning: 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​

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

一部のサードパーティスクリプトは、スクリプトの読み込みが完了した後、コンポーネントがマウントされるたびに（ルートナビゲーション後など）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​

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

バージョン履歴​

VersionChanges
v13.0.0beforeInteractiveとafterInteractiveがappをサポートするように変更されました。
v12.2.4onReady propが追加されました。
v12.2.2beforeInteractiveを使用したnext/scriptを_documentに配置できるようになりました。
v11.0.0next/scriptが導入されました。