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

<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コンポーネントで使用可能なプロパティの概要を以下に示します

プロパティ例タイプ必須
srcsrc="http://example.com/script"Stringインラインスクリプトを使用する場合を除き必須
strategystrategy="lazyOnload"String-
onLoadonLoad={onLoadFunc}Function-
onReadyonReady={onReadyFunc}Function-
onErroronError={onErrorFunc}Function-

必須プロパティ

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

src

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

オプションのプロパティ

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

strategy

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

  • beforeInteractive: Next.jsコードの前、およびページのハイドレーションが発生する前に読み込みます。
  • afterInteractive: (デフォルト) 早めに読み込みますが、ページでハイドレーションが発生した後です。
  • lazyOnload: ブラウザのアイドル時間に読み込みます。
  • worker: (試験的) Webワーカーで読み込みます。

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 を使用してできるだけ早くロードする必要があるスクリプトの例をいくつか挙げます。

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

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はまだ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プロパティが追加されました。
v12.2.2beforeInteractiveを使用するnext/scriptを_documentに配置できるようにしました。
v11.0.0next/scriptが導入されました。