Script 最適化
レイアウトスクリプト
複数のルートに対してサードパーティのスクリプトを読み込むには、next/script
をインポートし、スクリプトをレイアウトコンポーネントに直接含めます。
- TypeScript
- JavaScript
import Script from 'next/script'
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<section>{children}</section>
<Script src="https://example.com/script.js" />
</>
)
}
import Script from 'next/script'
export default function DashboardLayout({ children }) {
return (
<>
<section>{children}</section>
<Script src="https://example.com/script.js" />
</>
)
}
フォルダルート(例: dashboard/page.js
)やネストされたルート(例: dashboard/settings/page.js
)がユーザーによってアクセスされたとき に、サードパーティスクリプトが取得されます。Next.js は、同じレイアウト内でユーザーが複数のルートを移動しても、スクリプトが一度だけロードされるようにします。
アプリケーションスクリプト
すべてのルートに対してサードパーティのスクリプトを読み込むには、next/script
をインポートし、スクリプトを root レイアウトに直接含めます。
- TypeScript
- JavaScript
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
<Script src="https://example.com/script.js" />
</html>
)
}
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<Script src="https://example.com/script.js" />
</html>
)
}
このスクリプトはアプリケーション内のどのルートにアクセスした場合でもロードされ、実行されます。Next.js は、ユーザーが複数のページ間を移動しても、スクリプトが一度だけロードされるようにします。
推奨: パフォーマンスへの不必要な影響を最小限に抑えるため、特定のページまたはレイアウトにのみサードパーティスクリプトを含めることをお勧めします。
戦略
next/script
のデフォルトの動作により、任意のページまたはレイアウトでサードパーティスクリプトを読み込むことができますが、strategy
プロパティを使用して読み込みの動作を微調整できます。
beforeInteractive
: すべての Next.js コードおよびページのハイドレーションが発生する前に、スクリプトをロードします。afterInteractive
: (デフォルト) ページの一部がハイドレートされた後に、スクリプトを早期にロードします。lazyOnload
: ブラウザのアイドル時にスクリプトを後でロードします。worker
: (実験的機能) スクリプトを Web Worker でロードします。
各戦略とその使用例について詳しくは、next/script
の API リファレンスドキュメントを参照してください。
スクリプトを Web Worker にオフロードする(実験的機能)
警告:
worker
戦略はまだ安定しておらず、app
ディレクトリではまだ機能しません。ご注意ください。
worker
戦略を使用するスクリプトは、PartytownでWeb workerにオフロードされて実行されます。これにより、メインスレッドをアプリケーションコードの残りの部分に専念させることで、サイトのパフォーマンスを向上させることができます。
この戦略はまだ実験中であり、next.config.js
で nextScriptWorkers
フラグが有効になっている場合にのみ使用できます:
module.exports = {
experimental: {
nextScriptWorkers: true,
},
}
その後、next
(通常は npm run dev
または yarn dev
)を実行すると、Next.js が必要なパッケージのインストールを案内してセットアップを完了します:
npm run dev
次のような指示が表示されます: npm install @builder.io/partytown
を実行して Partytown をインストールしてください。
セットアップが完了すると、strategy="worker"
を定義すると、自動的にアプリケーションで Partytown がインスタンス化され、スクリプトが Web Worker にオフロードされます。
- 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" />
</>
)
}
Web Worker でサードパーティスクリプトをロードする際には、いくつかのトレードオフを考慮する必要があります。詳細については、Partytown の tradeoffs ドキュメントを参照してください。
インラインスクリプト
インラインスクリプト、つまり外部ファイルから読み込まれないスクリプトも Script コンポーネントでサポートされています。これらはJavaScriptを波括弧内に記述することで書くことができます:
<Script id="show-banner">
{`document.getElementById('banner').classList.remove('hidden')`}
</Script>
または dangerouslySetInnerHTML
プロパティを使用することができます:
<Script
id="show-banner"
dangerouslySetInnerHTML={{
__html: `document.getElementById('banner').classList.remove('hidden')`,
}}
/>
警告: インラインスクリプトのために、
id
プロパティが割り当 てられている必要があります。これにより、Next.js はスクリプトを追跡し、最適化します。
追加のコードの実行
イベントハンドラは、Script コンポーネントで使用され、特定のイベントが発生した後に追加のコードを実行することができます:
onLoad
: スクリプトが読み込みを完了した後にコードを実行します。onReady
: スクリプトが読み込みを完了した後、コンポーネントがマウントされるたびにコードを実行します。onError
: スクリプトの読み込みが失敗した場合にコードを実行します。
これらのハンドラは、next/script
がインポートされ、Client Component 内で使用されるときにのみ機能します。この場合、コードの最初の行として "use client"
が定義されている必要があります:
- TypeScript
- JavaScript
'use client'
import Script from 'next/script'
export default function Page() {
return (
<>
<Script
src="https://example.com/script.js"
onLoad={() => {
console.log('Script has loaded')
}}
/>
</>
)
}
'use client'
import Script from 'next/script'
export default function Page() {
return (
<>
<Script
src="https://example.com/script.js"
onLoad={() => {
console.log('Script has loaded')
}}
/>
</>
)
}
next/script
の API リファレンスを参照して、各イベントハンドラについて詳しく知り、例を確認 してください。
追加の属性
<script>
要素に割り当てることのできる多くのDOM属性がありますが、それらは Script コンポーネントでは使用されません。例えば nonce
や カスタムデータ属性 などです。追加の属性を含めると、それは自動的にHTMLに含まれる最終的な最適化された <script>
要素に転送されます。
- TypeScript
- JavaScript
import Script from 'next/script'
export default function Page() {
return (
<>
<Script
src="https://example.com/script.js"
id="example-script"
nonce="XUENAJFW"
data-test="script"
/>
</>
)
}
import Script from 'next/script'
export default function Page() {
return (
<>
<Script
src="https://example.com/script.js"
id="example-script"
nonce="XUENAJFW"
data-test="script"
/>
</>
)
}