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

Script Component

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

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

Props

Scriptコンポーネントで利用可能なプロパティの概要を以下に示します。

プロパティ例タイプ必須
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スクリプトは、ルートレイアウト (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 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埋め込みを再インスタンス化する方法の例を以下に示します。

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はまだ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)
        }}
      />
    </>
  )
}

バージョン履歴

バージョン変更履歴
v13.0.0beforeInteractiveおよびafterInteractiveがappをサポートするように変更されました。
v12.2.4onReadyプロパティが追加されました。
v12.2.2_documentにbeforeInteractiveを持つnext/scriptを配置できるようになりました。
v11.0.0next/scriptが導入されました。