アナリティクス
Next.jsは、パフォーマンス指標の測定とレポートのための組み込みサポートを提供しています。useReportWebVitals
フックを使用して自分でレポートを管理することもできますし、あるいはVercelは自動的に指標を収集して視覚化するマネージドサービスを提供しています。
クライアント計測
より高度なアナリティクスと監視のニーズに対応するため、Next.jsはアプリケーションのフロントエンドコードが実行を開始する前に動作するinstrumentation-client.js|ts
ファイルを提供します。これは、グローバルアナリティクス、エラー追跡、またはパフォーマンス監視ツールを設定するのに理想的です。
これを使用するには、アプリケーションのルートディレクトリにinstrumentation-client.js
またはinstrumentation-client.ts
ファイルを作成します。
// Initialize analytics before the app starts
console.log('Analytics initialized')
// Set up global error tracking
window.addEventListener('error', (event) => {
// Send to your error tracking service
reportError(event.error)
})
独自の構築
import { useReportWebVitals } from 'next/web-vitals'
function MyApp({ Component, pageProps }) {
useReportWebVitals((metric) => {
console.log(metric)
})
return <Component {...pageProps} />
}
詳細については、APIリファレンスを参照してください。
Web Vitals
Web Vitalsは、ウェブページのユーザー体験を捉えることを目的とした一連の有用な指標です。以下のWeb Vitalsがすべて含まれています。
- Time to First Byte (TTFB)
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
- Interaction to 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} />
}
カスタム指標
上記の主要な指標に加えて、ページがハイドレーションおよびレンダリングされるまでにかかる時間を測定する、いくつかの追加のカスタム指標があります。
Next.js-hydration
: ページがハイドレーションを開始してから完了するまでにかかる時間 (ミリ秒)Next.js-route-change-to-render
: ルート変更後にページがレンダリングを開始するまでにかかる時間 (ミリ秒)Next.js-render
: ルート変更後にページがレンダリングを完了するまでにかかる時間 (ミリ秒)
これらの指標のすべての結果は個別に処理できます。
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をサポートするすべてのブラウザで機能します。
外部システムへの結果送信
サイト上の実際のユーザーパフォーマンスを測定および追跡するために、結果を任意のエンドポイントに送信できます。例:
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 })
}
})
ヒント: Google Analyticsを使用している場合、
id
値を使用することで、指標の分布を手動で構築できます (パーセンタイルなどを計算するため)。
useReportWebVitals((metric) => { // Use `window.gtag` if you initialized Google Analytics as this example: // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics window.gtag('event', metric.name, { value: Math.round( metric.name === 'CLS' ? metric.value * 1000 : metric.value ), // values must be integers event_label: metric.id, // id unique to current page load non_interaction: true, // avoids affecting bounce rate. }) })
Google Analyticsへの結果送信について詳しくはこちら。
これは役に立ちましたか?