スクリプト最適化
アプリケーションスクリプト
すべてのルートでサードパーティスクリプトを読み込むには、next/script
をインポートし、スクリプトをカスタム _app
に直接含めます:
import Script from 'next/script'
export default function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Script src="https://example.com/script.js" />
</>
)
}
このスクリプトは、アプリケーション内の_どの_ルートにアクセスしたときも読み込まれて実行されます。Next.jsは、ユーザーが複数のページ間を移動しても、スクリプトが確実に1回だけ読み込まれるようにします。
推奨事項: パフォーマンスへの不要な影響を最小限に抑えるため、サードパーティスクリプトは特定のページまたはレイアウトにのみ含めることをお勧めします。
ストラテジー
next/script
のデフォルトの動作では任意のページまたはレイアウトでサードパーティスクリプトを読み込むことができますが、strategy
プロパティを使用して読み込み動作を微調整できます:
beforeInteractive
: Next.jsのコードや任意のページのハイドレーションが発生する前にスクリプトを読み込みます。afterInteractive
: (デフォルト) ページの一部のハイドレーション後にスクリプトを早期に読み込みます。lazyOnload
: ブラウザのアイドル時間中にスクリプトを後で読み込みます。worker
: (実験的) スクリプトをウェブワーカーで読み込みます。
各ストラテジーとその使用例の詳細については、next/script
APIリファレンスドキュメントを参照してください。
スクリプトをウェブワーカーにオフロードする(実験的)
警告:
worker
ストラテジーはまだ安定版ではなく、App Routerとはまだ連携していません。注意して使用してください。
worker
ストラテジーを使用するスクリプトは、Partytownを使用してウェブワーカーにオフロードされ、実行されます。これにより、メインスレッドをアプリケーションの他のコードに専念させ、サイトのパフォーマンスを向上させることができます。
このストラテジーは依然として実験的であり、next.config.js
でnextScriptWorkers
フラグが有効になっている場合にのみ使用できます:
module.exports = {
experimental: {
nextScriptWorkers: true,
},
}
次に、next
(通常はnpm run dev
またはyarn dev
)を実行すると、Next.jsがセットアップを完了するために必要なパッケージのインストール手順を案内します:
npm run dev
以下のような手順が表示されます:Partytownをインストールするには、npm install @builder.io/partytown
を実行してください
セットアップが完了したら、strategy="worker"
を定義すると、アプリケーションでPartytownが自動的にインスタンス化され、スクリプトがウェブワーカーにオフロードされます。
import Script from 'next/script'
export default function Home() {
return (
<>
<Script src="https://example.com/script.js" strategy="worker" />
</>
)
}
ウェブワーカーでサードパーティスクリプトを読み込む際には、いくつかのトレードオフを考慮する必要があります。詳細については、Partytownのトレードオフドキュメントをご覧ください。
カスタムPartytown設定の使用
worker
ストラテジーは追加の設定なしで動作しますが、Partytownは設定オブジェクトをサポートしており、debug
モードの有効化やイベントとトリガーの転送など、いくつかの設定を変更できます。
追加の設定オプションを追加したい場合は、カスタム _document.js
で使用される <Head />
コンポーネント内に含めることができます:
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<script
data-partytown-config
dangerouslySetInnerHTML={{
__html: `
partytown = {
lib: "/_next/static/~partytown/",
debug: true
};
`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Partytownの設定を変更するには、以下の条件を満たす必要があります:
- デフォルトの設定を上書きするには、
data-partytown-config
属性を使用する必要があります - Partytownのライブラリファイルを別のディレクトリに保存しない限り、Next.jsが必要な静的ファイルを保存している場所をPartytownに知らせるために、設定オブジェクトに
lib: "/_next/static/~partytown/"
プロパティと値を含める必要があります。
注意: アセットプレフィックスを使用していて、Partytownのデフォルト設定を変更したい場合は、
lib
パスの一部としてアセットプレフィックスを含める必要があります。
追加できる他のプロパティの全リストについては、Partytownの設定オプションを参照してください。
インラインスクリプト
外部ファイルから読み込まれないインラインスクリプトも、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')`,
}}
/>
警告: Next.jsがスクリプトを追跡および最適化できるように、インラインスクリプトには
id
プロパティを割り当てる必要があります。
追加のコードの実行
Script コンポーネントでイベントハンドラを使用して、特定のイベント発生後に追加のコードを実行できます:
onLoad
: スクリプトの読み込み完了後にコードを実行します。onReady
: スクリプトの読み込み完了後、およびコンポーネントがマウントされるたびにコードを実行します。onError
: スクリプトの読み込みに失敗した場合にコードを実行します。
これらのハンドラは、next/script
がインポートされ、最初の行に "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リファレンスを参照してください。
追加の属性
nonce
やカスタムデータ属性など、Script コンポーネントで使用されない多くのDOM属性が<script>
要素に割り当てられる可能性があります。追加の属性を含めると、自動的にHTMLに含まれる最終的に最適化された<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"
/>
</>
)
}