Informes personalizados
También es posible utilizar el relayer integrado que usa Next.js Speed Insights y enviar los datos a tu propio servicio o subirlos a Google Analytics.
Veamos cómo podríamos agregar esto ahora. Podemos añadirlo a la aplicación de demostración que hemos estado optimizando.
Utilizaremos un console.log
para ver las métricas en tiempo real.
Para hacer esto, podemos aprovechar la función reportWebVitals
proporcionada por Next.js.
Nota: Esto NO es necesario si acabas de completar las lecciones anteriores.
npx create-next-app@latest nextjs-lighthouse --use-npm --example "https://github.com/vercel/next-learn/tree/main/seo"
Abre pages/_app.js
y exporta la siguiente función:
export function reportWebVitals(metric) {
console.log(metric);
}
Luego construye e inicia tu aplicación:
npm run build && npm run start
Si abres Chrome, verás las métricas dentro de la consola de DevTools. También notarás que FID solo se activará cuando interactúes con la página.
Lectura adicional
- Next.js: Medición del rendimiento