カスタムレポート

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: パフォーマンスの測定