<Script>
このAPIリファレンスは、Scriptコンポーネントで利用可能なpropsの使用方法を理解するのに役立ちます。機能や使用法については、スクリプトの最適化ページを参照してくだ さい。
- TypeScript
- JavaScript
import Script from 'next/script'
export default function Dashboard() {
return (
<>
<Script src="https://example.com/script.js" />
</>
)
}
import Script from 'next/script'
export default function Dashboard() {
return (
<>
<Script src="https://example.com/script.js" />
</>
)
}
Props
Scriptコンポーネントで利用可能なpropsの概要を以下に示します:
Prop | Example | Type | Required |
---|---|---|---|
src | src="http://example.com/script" | String | インラインスクリプトを使用しない限り必須 |
strategy | strategy="lazyOnload" | String | - |
onLoad | onLoad={onLoadFunc} | Function | - |
onReady | onReady={onReadyFunc} | Function | - |
onError | onError={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
) 内に配置され、サイト全体で必要とされるスクリプトをロードするように設計されています(つまり、アプリケーション内のどのページがサーバー側でロードされたときにもスクリプトはロードされます)。
この戦略は、ページのどの部分が対話的になる前にフェッチされる必要がある重要なスクリプトにのみ使用してください。
- TypeScript
- JavaScript
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>
{children}
<Script
src="https://example.com/script.js"
strategy="beforeInteractive"
/>
</body>
</html>
)
}
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="ja">
<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
スクリプトは任意のページまたはレイアウト内に配置でき、そのページ(またはページのグループ)がブラウザーで開かれたときのみロードおよび実行されます。
import Script from 'next/script'
export default function Page() {
return (
<>
<Script src="https://example.com/script.js" strategy="afterInteractive" />
</>
)
}
afterInteractive
の良い候補となるスクリプトの例:
- タグマネージャー
- アナリティクス
lazyOnload
lazyOnload
戦略を使用するスクリプトは、ブラウザーのアイドル時間中にクライアントサイドでHTMLに挿入され、ページのすべてのリソースがフェッチされてからロードされます。この戦略は、早期にロードする必要のないバックグラウンドまたは低優先度のスクリプトに使用されるべきです。
lazyOnload
スクリプトは任意のページまたはレイアウト内に配置でき、そのページ(またはページのグループ)がブラウザーで開かれたときのみロードおよび実行されます。
import Script from 'next/script'
export default function Page() {
return (
<>
<Script src="https://example.com/script.js" strategy="lazyOnload" />
</>
)
}
lazyOnload
でフェッチできるスクリプトの例で、すぐにロードする必要がないもの:
- チャットサポートプラグイン
- ソーシャルメディアウィジェット
worker
Warning:
worker
戦略はまだ安定しておらず、app
ディレクトリではまだ使用できません。慎重にご利用ください。
worker
戦略を使用するスクリプトは、Webワーカーにオフロードされ、メインスレッドを解放し、重要でファーストパーティのリソースのみが処理されるようにします。この戦略は任意のスクリプトに使用できますがこれは高度なユースケースであり、すべてのサードパーティスクリプトをサポートすることを保証するものではありません。
worker
を戦略として使用するには、next.config.js
でnextScriptWorkers
フラグを有効にする必要があります:
module.exports = {
experimental: {
nextScriptWorkers: true,
},
}
worker
スクリプトは現在pages/
ディレクトリのみで使用可能です:
- TypeScript
- JavaScript
import Script from 'next/script'
export default function Home() {
return (
<>
<Script src="https://example.com/script.js" strategy="worker" />
</>
)
}
import Script from 'next/script'
export default function Home() {
return (
<>
<Script src="https://example.com/script.js" strategy="worker" />
</>
)
}
onLoad
Warning:
onLoad
はサーバー コンポーネントではまだ機能せず、クライアント コンポーネントでのみ使用できます。さらに、beforeInteractive
とは一緒に使用できません — 代わりにonReady
を使用してください。
一部のサードパーティスクリプトは、スクリプトの読み込みが完了したら、コンテンツを初期化したり関数を呼び出したりするためにJavaScriptコードを実行する必要があります。読み込み戦略としてafterInteractive
またはlazyOnload
を使用してスクリプトを読み込む場合は、読み込み完了後にコードを実行することができます。
以下に、ライブラリの読み込みが完了したときのみlodashのメソッドを実行する例を示します。
- TypeScript
- JavaScript
'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]))
}}
/>
</>
)
}
'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
はサーバー コンポーネントではまだ機能せず、クライアント コンポーネントでのみ使用できます。
一部のサードパーティスクリプトは、スクリプトの読み込み完了後、コンポーネントがマウントされるたびにJavaScriptコードを実行する必要があります(ルートナビゲーション後など)。スクリプトのロードイベント後に、一度目のロード時にコードを実行し、その後のコンポーネントのリマウントのたびにonReady
プロパティを使用してコードを実行できます。
コンポーネントがマウントされるたびにGoogle Maps JSを埋め込む方法の例:
- TypeScript
- JavaScript
'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,
})
}}
/>
</>
)
}
'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
はサーバー コンポーネントではまだ機能せず、クライアント コンポーネントでのみ使用できます。onError
はbeforeInteractive
のロード戦略と一緒に使用できません。
スクリプトの読み込みが失敗したときにキャッチすることは便利な場合があります。これらのエラーは、onError
プロパティで処理できます:
- TypeScript
- JavaScript
'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)
}}
/>
</>
)
}
'use client'
import Script from 'next/script'
export default function Page() {
return (
<>
<Script
src="https://example.com/script.js"
onError={(e) => {
console.error('Script failed to load', e)
}}
/>
</>
)
}
バージョン履歴
バージョン | 変更点 |
---|---|
v13.0.0 | beforeInteractive と afterInteractive は app をサポートするように変更されました。 |
v12.2.4 | onReady prop が追加されました。 |
v12.2.2 | _document に配置されたbeforeInteractive のnext/script が許可されました。 |
v11.0.0 | next/script が導入されました。 |