︙

Analytics

Next.js は、パフォーマンス指標を測定し報告するための組み込みサポートを持っています。自分で報告を管理するために useReportWebVitals hook を使用するか、または、Vercel はマネージドサービスを提供して自動的に指標を収集し視覚化します。

Build Your Own

app/_components/web-vitals.js

'use client'

import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
}

app/layout.js

import { WebVitals } from './_components/web-vitals'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  )
}

useReportWebVitals hook は "use client" ディレクティブを必要とするため、最もパフォーマンスの高いアプローチは root layout がインポートする別の component を作成することです。これにより、WebVitals component に対する client の境界を排他的に制限します。

詳細については、API Reference をご覧ください。

Web Vitals

Web Vitals は、ウェブページのユーザーエクスペリエンスを把握するための有用な指標のセットです。以下のウェブバイタルはすべて含まれています：

これらの指標の結果はすべて、nameプロパティを使用して処理できます。

app/_components/web-vitals.tsx

'use client'

import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // handle FCP results
      }
      case 'LCP': {
        // handle LCP results
      }
      // ...
    }
  })
}

app/_components/web-vitals.js

'use client'

import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // handle FCP results
      }
      case 'LCP': {
        // handle LCP results
      }
      // ...
    }
  })
}

Sending results to external systems

あなたは、結果を任意のエンドポイントに送信して、サイトでの実際のユーザーパフォーマンスを測定し追跡することができます。例えば：

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric);
  const url = "https://example.com/analytics";

  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { body, method: "POST", keepalive: true });
  }
});

Good to know: もし Google Analytics を使用しているなら、この id value を使うと、手動でメトリック分布を構築することができます(パーセンタイルを計算するためなどに)。

useReportWebVitals((metric) => {
  // この例のようにGoogle Analytics を初期化した場合は、`window.gtag`を使用してください:
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
  window.gtag('event', metric.name, {.
    value : Math.round(
      metric.name === 'CLS' ? metric.value * 1000 : metric.value
    ), // 値は整数でなければなりません
    event_label: metric.id, // 現在のページ読み込みにユニークなid
    non_interaction: true ，// バウンス率に影響を与えないようにします。
  })
})

Google Analytics への結果送信について詳しく読む。