コンテンツにスキップ
APIリファレンスコンポーネントScript

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

プロパティ例タイプ必須
srcsrc="http://example.com/script"文字列インラインスクリプトが使用されない限り必須
strategystrategy="lazyOnload"文字列-
onLoadonLoad={onLoadFunc}関数-
onReadyonReady={onReadyFunc}関数-
onErroronError={onErrorFunc}関数-

必須プロパティ

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

src

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

オプションプロパティ

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

strategy

スクリプトのロード戦略。使用できる戦略は4種類あります。

  • beforeInteractive: すべてのNext.jsコードとページハイドレーションの前にロードされます。
  • afterInteractive: (デフォルト) ページでの一部ハイドレーション後に早期にロードされます。
  • lazyOnload: ブラウザのアイドル時間中にロードされます。
  • worker: (実験的) Web Workerでロードされます。

beforeInteractive

beforeInteractive戦略でロードされるスクリプトは、サーバーからの初期HTMLにインジェストされ、Next.jsモジュールの前にダウンロードされ、配置順に実行されます。

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

beforeInteractiveスクリプトは、Documentコンポーネント（pages/_document.js）内に配置する必要があり、サイト全体で必要なスクリプト（つまり、アプリケーションのどのページもサーバーサイドでロードされたときにスクリプトがロードされる）をロードするように設計されています。

この戦略は、できるだけ早くフェッチする必要があるクリティカルなスクリプトにのみ使用する必要があります。

pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
 
export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <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 Routerではまだ動作しません。注意して使用してください。

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

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はまだ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プロパティを使用できます。

コンポーネントがマウントされるたびにGoogle Maps JS埋め込みを再インスタンス化する方法の例を次に示します。

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

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.0beforeInteractiveとafterInteractiveはappをサポートするように変更されました。
v12.2.4onReady propが追加されました。
v12.2.2next/scriptをbeforeInteractiveと共に_documentに配置できるようになりました。
v11.0.0next/scriptが導入されました。