🚀
【Next.js和訳】Basic Features/Script Optimization
この記事について
この記事は、Basic Features/Script Optimizationの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Script Component
バージョン履歴
| バージョン | 変更 |
|---|---|
v11.0.0 |
next/script が導入されました。 |
Next.js スクリプトコンポーネントを使用すると、開発者はサードパーティスクリプトの読み込み優先度を設定して、開発者の作業時間を短縮し、読み込みパフォーマンスを向上させることができます。
Web サイトでは、分析、広告、カスタマーサポートウィジェット、同意管理などのためにサードパーティが必要になることがよくあります。しかし、これらのスクリプトは読み込みパフォーマンスが重くなりがちで、ユーザーエクスペリエンスを低下させる原因となります。開発者は、最適な読み込みを実現するために、アプリケーションのどこにこれらのスクリプトを配置すべきか、悩むことがよくあります。
next/scriptを使用すると、strategyプロパティを定義でき、Next.js はスクリプトの読み込みを最適化します。
-
beforeInteractive：ボットの検出や同意管理など、ページがインタラクティブになる前にフェッチして実行する必要がある重要なスクリプトのためのものです。これらのスクリプトは、サーバーから最初の HTML に挿入され、セルフバンドルされた JavaScript が実行される前に実行されます。 -
afterInteractive（デフォルト）：タグマネージャーや分析など、ページがインタラクティブになった後にフェッチして実行できるスクリプトのためのものです。これらのスクリプトはクライアント側に挿入され、ハイドレーション後に実行されます。 -
lazyOnloadチャットサポートやソーシャルメディアウィジェットなど、アイドル時間中に読み込みを待機できるスクリプトのためのものです。
使用法
以前は、Next.js ページの Head 内で script タグを定義する必要がありました。
pages/index.js
// Before
import Head from 'next/head'
export default function Home() {
return (
<>
<Head>
<script async src="https://www.google-analytics.com/analytics.js" />
</Head>
</>
)
}
現在は、Next.js ページのボディで next/script を使用します。これはクライアントサイドの機能で、strategy に基づいて、いつどのようにリモートスクリプトをロードするかを決定します。
pages/index.js
// After
import Script from 'next/script'
export default function Home() {
return (
<>
<Script src="https://www.google-analytics.com/analytics.js" />
</>
)
}
例
ポリフィルのロード
import Script from "next/script"
export default function Home() {
return (
<>
<Script
src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"
strategy="beforeInteractive"
/>
</>
)
}
遅延読み込み
import Script from "next/script"
export default function Home() {
return (
<>
<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload" />
</>
)
}
ロード後のコードの実行（onLoad）
import Script from "next/script"
export default function Home() {
return (
<>
<Script
id="stripe-js"
src="https://js.stripe.com/v3/"
onLoad={() => {
this.setState({ stripe: window.Stripe("pk_test_12345") })
}}
/>
</>
)
}
インラインスクリプト
import Script from 'next/script'
<Script id="show-banner" strategy="lazyOnload">
{`document.getElementById('banner').removeClass('hidden')`}
</Script>
// or
<Script
id="show-banner"
dangerouslySetInnerHTML={{
__html: `document.getElementById('banner').removeClass('hidden')`
}}
/>
転送属性
import Script from "next/script"
export default function Home() {
return (
<>
<Script
src="https://www.google-analytics.com/analytics.js"
id="analytics"
nonce="XUENAJFW"
data-test="analytics"
/>
</>
)
}
Discussion