SEO: カスタムレポート | Next.js 日本語

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 はページを操作した時にのみトリガーされることに気づくでしょう。

カスタムレポート