还可以使用 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** 才会触发。