🚀

【Next.js和訳】Basic Features/Script Optimization

2021.10.02に公開

Next.js

tech

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、Basic Features/Script Optimizationの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Script Component

バージョン履歴

バージョン	変更
`v11.0.0`	`next/script` が導入されました。

Next.jsスクリプトコンポーネントを使用すると、開発者はサードパーティスクリプトの読み込み優先度を設定して、開発者の作業時間を短縮し、読み込みパフォーマンスを向上させることができます。

Webサイトでは、分析、広告、カスタマーサポートウィジェット、同意管理などのためにサードパーティが必要になることがよくあります。しかし、これらのスクリプトは読み込みパフォーマンスが重くなりがちで、ユーザーエクスペリエンスを低下させる原因となります。開発者は、最適な読み込みを実現するために、アプリケーションのどこにこれらのスクリプトを配置すべきか、悩むことがよくあります。

next/scriptを使用すると、strategyプロパティを定義でき、Next.jsはスクリプトの読み込みを最適化します。

beforeInteractive：ボットの検出や同意管理など、ページがインタラクティブになる前にフェッチして実行する必要がある重要なスクリプトのためのものです。これらのスクリプトは、サーバーから最初のHTMLに挿入され、セルフバンドルされたJavaScriptが実行される前に実行されます。
afterInteractive（デフォルト）：タグマネージャーや分析など、ページがインタラクティブになった後にフェッチして実行できるスクリプトのためのものです。これらのスクリプトはクライアント側に挿入され、ハイドレーション後に実行されます。
lazyOnload チャットサポートやソーシャルメディアウィジェットなど、アイドル時間中に読み込みを待機できるスクリプトのためのものです。

注意：

<Script> は、afterInteractive および lazyOnload 戦略を使用したインラインスクリプトをサポートします。
<Script> でラップされたインラインスクリプトでは、スクリプトを追跡し最適化するために id 属性を定義する必要があります。

使用法

以前は、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 に基づいて、いつどのようにリモートスクリプトをロードするかを決定します。

注意：

next/script は、next/head コンポーネントまたは pages/_document.js に配置してはいけません。

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

ログインするとコメントできます