Mide Performance en NextJS

¡Esto está genial! Muchas gracias por este gran aporte. De igual forma anexo la documentación de Next donde mencionan algunas métricas adicionales que se pueden agregar.
Measuring performance

📈 Performance

Hydration.- tiempo en que el JS de React comienza a funcionar

FCP.- First Content Paint

TTFB.- Time to first bite, indicador del tiempo en requerir cosas de otro servidor

Next.js nos ayuda bastante con herramientas de performance.

Para ello dentro de _app.js agregamos y exportamos la función reportWebVitals, este recibe un parámetro llamado metric.

export function reportWebVitals(metric) {
  console.log(metric)
  // analytics - calibre
  // serverAnulicts.log(metric)
}

Esto nos imprime parámetros los cuales lo podemos enviar a servidores de análisis

RESUMEN: Next.js nos da herramientas de desarrollo para métricas de carga de sitios

Hace un par de días salió Next.js 10 y uno de sus flagship features es una herramienta mucho más robusta de analytics. 😄 https://nextjs.org/analytics

Next.js Analytics “Your True Lighthouse”

Muy buena info! Supongo que estaré usándola a menudo! Alguien tiene idea si también podemos usar Google Lighthouse para medir la performance? En caso afirmativo, con cuál herramienta consideran mejor medir?

TypeScript

import type { AppProps, NextWebVitalsMetric } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export function reportWebVitals(metric: NextWebVitalsMetric) {
  console.log(metric)
}

export default MyApp

que gran herramienta!

Si alguien tiene problemas con el tipo de datos de “metric” puede solucionarlo creando el tipo y asingnadolo así:

type NextWebVitalsMetrics = {
  id: string;
  label: string;
  name: string;
  startTime: number;
  value: number;
}

export const reportWebVitals = (metric: NextWebVitalsMetrics) => {
  // analitic - calibre
  // here you should send information to your server
}

es muy importantes la performance

Noo!! que buena herramienta ! no la conocía ! Muy útil !