カスタムレポート

Next.js Speed Insightsが使用する組み込みのリレーサーを使用し、データを独自のサービスに送信したり、Google Analyticsにプッシュしたりすることも可能です。

どのように追加できるか見ていきましょう。最適化してきたデモアプリに追加できます。

リアルタイムでメトリクスを確認するためにconsole.logを使用します。

これを行うために、Next.jsが提供するreportWebVitals関数を活用できます。

注意：前のレッスンを終えたばかりの場合は、これは不要です。

npx create-next-app@latest nextjs-lighthouse --use-npm --example "https://github.com/vercel/next-learn/tree/main/seo"

pages/\_app.jsを開き、以下の関数をエクスポートします。

export function reportWebVitals(metric) {
  console.log(metric);
}

次に、アプリケーションをビルドして起動します。

npm run build && npm run start

Chromeを開くと、DevToolsコンソール内にメトリクスが表示されます。また、ページにインタラクションするまでFIDはトリガーされないことに気づくでしょう。

さらに読む

• Next.js: パフォーマンスの測定