Script Optimization

アプリケーション Scripts

全ての routes 用にサードパーティスクリプトをロードするために、import next/scriptを利用し、スクリプトをカスタム _appに直接含めます。

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://example.com/script.js" />
    </>
  )
}

このスクリプトは、アプリケーション内の任意の route がアクセスされたときにロードされ、実行されます。Next.js は、ユーザーが複数のページ間を移動してもスクリプトが一度だけロードされることを保証します。

推奨事項: パフォーマンスへの不必要な影響を最小限に抑えるため、特定のページやレイアウトにのみサードパーティの scripts を含めることをお勧めします。

Strategy

next/scriptの既定の default 動作は、任意のページや layout でサードパーティの scripts を読み込むことを許可していますが、strategyプロパティを使用することでその loading 動作を微調整することができます。

• beforeInteractive: Next.js code およびページのハイドレーションが行われる前に、スクリプトを読み込みます。
• afterInteractive: (default) スクリプトはページ上で一部のハイドレーションが発生した後、早期に読み込みます。
• lazyOnload：ブラウザのアイドル中にスクリプトを後で読み込みます。
• worker: (実験的)ウェブ worker でスクリプトを読み込む。

それぞれの strategy とその使用例について詳しく学ぶには、next/script の API reference ドキュメンテーションを参照してください。

ウェブ Worker への Scripts のオフロード(実験的)

警告: worker strategy はまだ安定しておらず、app ディレクトリではまだ動作しません。注意して使用してください。

worker strategy を使用する Scripts は、Partytown を使用して Web worker でオフロードして実行されます。これにより、メインの thread をアプリケーションの code の残りに専念することで、サイトのパフォーマンスが向上する場合があります。

この strategy はまだ実験段階であり、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 がインスタンス化され、スクリプトは web worker にオフロードされます。

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" />
    </>
  )
}

ウェブの worker にサードパーティのスクリプトを loading する際に考慮すべきいくつかのトレードオフがあります。詳細については、Partytown の tradeoffs ドキュメンテーションをご覧ください。

インライン Scripts

インラインの scripts、または外部ファイルから読み込まれない scripts も、Script component によってサポートされています。それらは、中括弧内に 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 がスクリプトの追跡と最適化を行うために、インラインの scripts に割り当てる必要があります。

追加の Code を実行する

イベントハンドラは、特定のイベントが発生した後に追加の code を実行するために、スクリプトの component と一緒に使用することができます：

• onLoad: スクリプトの loading が完了した後に、code を実行します
• onReady：スクリプトの loading が終了し、component がマウントされるたびに、code を実行します
• onError: スクリプトのロードに失敗した場合、code を実行します

これらのハンドラは、next/script がインポートされて Client Component の内部で使用され、code の最初の行として"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')
        }}
      />
    </>
  )
}

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onLoad={() => {
          console.log('Script has loaded')
        }}
      />
    </>
  )
}

それぞれのイベントの handler や例を見るために、より詳しく学ぶには next/script の API reference を参照してください。

追加属性

<script> エレメントに割り当てることができる DOM の属性は多々ありますが、その中には Script component では使用しない nonce や custom data attributes のようなものがあります。追加の属性を含めると、それは自動的に最終的に最適化された <script>エレメントに転送され、HTML に含まれるようになります。

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"
      />
    </>
  )
}