Analytics

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

Build Your Own

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

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    console.log(metric)
  })

  return <Component {...pageProps} />
}

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

Web Vitals

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

• 最初のバイトまでの時間 (TTFB)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• 累積 Layout シフト (CLS)
• Next Paint へのやり取り (INP)

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

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

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // handle FCP results
      }
      case 'LCP': {
        // handle LCP results
      }
      // ...
    }
  })

  return <Component {...pageProps} />
}

Custom Metrics

上記のコアメトリクスに加えて、ページがハイドレートし、 render するまでの時間を測定する追加のカスタムメトリクスがあります。

• Next.js-hydration：ページが start し、ハイドレートを完了するまでの時間の長さ(ms 単位)
• Next.js-route-change-to-render: route が変更されてからページが start という状態までの rendering にかかる時間(ミリ秒単位)
• Next.js-render：route 変更後にページが render を完了するまでの時間(ms)

これらのメトリクスの結果はすべて個別に処理できます：

export function reportWebVitals(metric) {
  switch (metric.name) {
    case "Next.js-hydration":
      // handle hydration results
      break;
    case "Next.js-route-change-to-render":
      // handle route-change to render results
      break;
    case "Next.js-render":
      // handle render results
      break;
    default:
      break;
  }
}

これらのメトリクスは、User Timing API をサポートするすべてのブラウザで動作します。

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 への結果送信について詳しく読む 。