自定义报告

还可以使用 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：测量性能