Cómo agregar análisis a tu aplicación Next.js

Next.js tiene soporte integrado para medir y reportar métricas de rendimiento. Puedes usar el hook useReportWebVitals para gestionar los reportes manualmente, o alternativamente, Vercel ofrece un servicio administrado para recolectar y visualizar métricas automáticamente.

Instrumentación del Cliente

Para necesidades más avanzadas de análisis y monitoreo, Next.js proporciona un archivo instrumentation-client.js|ts que se ejecuta antes de que comience el código frontend de tu aplicación. Esto es ideal para configurar herramientas globales de análisis, seguimiento de errores o monitoreo de rendimiento.

Para usarlo, crea un archivo instrumentation-client.js o instrumentation-client.ts en el directorio raíz de tu aplicación:

instrumentation-client.js

// Inicializar análisis antes de que la aplicación comience
console.log('Análisis inicializado')

// Configurar seguimiento global de errores
window.addEventListener('error', (event) => {
  // Enviar a tu servicio de seguimiento de errores
  reportError(event.error)
})

Construye tu Propia Solución

app/_components/web-vitals.js

'use client'

import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
}

app/layout.js

import { WebVitals } from './_components/web-vitals'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  )
}

Dado que el hook useReportWebVitals requiere la directiva 'use client', el enfoque más eficiente es crear un componente separado que el layout raíz importe. Esto limita el límite del cliente exclusivamente al componente WebVitals.

Consulta la Referencia de API para más información.

Web Vitals

Web Vitals son un conjunto de métricas útiles que buscan capturar la experiencia del usuario en una página web. Las siguientes métricas de Web Vitals están incluidas:

Tiempo hasta el primer byte (TTFB)
Primera pintura con contenido (FCP)
Pintura con contenido más grande (LCP)
Retraso de la primera entrada (FID)
Cambio de diseño acumulativo (CLS)
Interacción a la siguiente pintura (INP)

Puedes manejar todos los resultados de estas métricas usando la propiedad name.

'use client'

import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // manejar resultados FCP
      }
      case 'LCP': {
        // manejar resultados LCP
      }
      // ...
    }
  })
}

Enviando resultados a sistemas externos

Puedes enviar resultados a cualquier endpoint para medir y rastrear el rendimiento real de los usuarios en tu sitio. Por ejemplo:

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'

  // Usar `navigator.sendBeacon()` si está disponible, recurriendo a `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

Nota importante: Si usas Google Analytics, el valor id te permite construir distribuciones de métricas manualmente (para calcular percentiles, etc.)

useReportWebVitals((metric) => {
  // Usar `window.gtag` si inicializaste Google Analytics como en este ejemplo:
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics
  window.gtag('event', metric.name, {
    value: Math.round(
      metric.name === 'CLS' ? metric.value * 1000 : metric.value
    ), // los valores deben ser enteros
    event_label: metric.id, // id único para la carga actual de la página
    non_interaction: true, // evita afectar la tasa de rebote.
  })
})

Lee más sobre enviar resultados a Google Analytics.

Cómo agregar análisis a tu aplicación Next.js

Instrumentación del Cliente

Construye tu Propia Solución

Web Vitals

Enviando resultados a sistemas externos

On this page