Lang x Lang

︙

Script Optimization

Layout Scripts

複数の routes に対するサードパーティのスクリプトをロードするには、next/scriptを import し、そのスクリプトを直接 layout component に含めてください：

app/dashboard/layout.tsx
import Script from 'next/script'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <section>{children}</section>
      <Script src="https://example.com/script.js" />
    </>
  )
}
app/dashboard/layout.js
import Script from 'next/script'

export default function DashboardLayout({ children }) {
  return (
    <>
      <section>{children}</section>
      <Script src="https://example.com/script.js" />
    </>
  )
}

ユーザーがフォルダ route(例えば、dashboard/page.js)またはネストされた route(例えば、dashboard/settings/page.js)にアクセスするとき、サードパーティのスクリプトが取得されます。Next.js は、ユーザーが同じ layout の複数の routes 間を移動する場合でも、スクリプトが 一度だけ読み込まれることを保証します。

アプリケーション Scripts

全ての routes に対してサードパーティのスクリプトをロードするために、next/script を import し、そのスクリプトをあなたの root layout に直接含めてください:

app/layout.tsx
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>
  )
}
app/layout.js
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>
  )
}

このスクリプトは、アプリケーション内の任意の 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 フラグが有効になっている場合にのみ使用できます。

next.config.js
module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

次に、nextを実行します(通常はnpm run devまたはyarn dev)。すると、 Next.js が必要なパッケージのインストールをガイドし、セットアップを完了させます：

Terminal
npm run dev

次のような指示が表示されます: Partytown をインストールするには、npm install @builder.io/partytown を実行してください

セットアップが完了したら、strategy="worker"を定義すると、自動的にアプリケーションに Partytown がインスタンス化され、スクリプトは web worker にオフロードされます。

pages/home.tsx
import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="worker" />
    </>
  )
}
pages/home.js
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"が定義されている場合にのみ機能します。

app/page.tsx
'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')
        }}
      />
    </>
  )
}
app/page.js
'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')
        }}
      />
    </>
  )
}

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

追加属性

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

app/page.tsx
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"
      />
    </>
  )
}
app/page.js
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"
      />
    </>
  )
}

当社サイトでは、Cookie を使用しています。各規約をご確認の上ご利用ください:
Cookie Policy, Privacy Policy および Terms of Use