Analytik

Next.js bietet integrierte Unterstützung zum Messen und Berichten von Leistungsmetriken. Sie können entweder den useReportWebVitals-Hook verwenden, um die Berichterstattung selbst zu verwalten, oder alternativ bietet Vercel einen verwalteten Dienst zur automatischen Erfassung und Visualisierung von Metriken.

Eigene Lösung entwickeln

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'
 
function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
 
  return <Component {...pageProps} />
}

Weitere Informationen in der API-Referenz.

Web Vitals

Web Vitals sind eine Reihe nützlicher Metriken, die darauf abzielen, die Nutzererfahrung einer Webseite zu erfassen. Folgende Web Vitals sind enthalten:

Sie können alle Ergebnisse dieser Metriken über die name-Eigenschaft behandeln.

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'
 
function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // FCP-Ergebnisse behandeln
      }
      case 'LCP': {
        // LCP-Ergebnisse behandeln
      }
      // ...
    }
  })
 
  return <Component {...pageProps} />
}

Benutzerdefinierte Metriken

Zusätzlich zu den oben genannten Kernmetriken gibt es einige zusätzliche benutzerdefinierte Metriken, die die Zeit messen, die für das Hydratisieren und Rendern der Seite benötigt wird:

Next.js-hydration: Dauer des Starts und Abschlusses der Hydratisierung der Seite (in ms)
Next.js-route-change-to-render: Dauer bis zum Beginn des Renderns nach einem Routenwechsel (in ms)
Next.js-render: Dauer des Abschlusses des Renderns nach einem Routenwechsel (in ms)

Sie können die Ergebnisse dieser Metriken separat behandeln:

export function reportWebVitals(metric) {
  switch (metric.name) {
    case 'Next.js-hydration':
      // Hydratisierungs-Ergebnisse behandeln
      break
    case 'Next.js-route-change-to-render':
      // Ergebnisse für Routenwechsel bis zum Rendern behandeln
      break
    case 'Next.js-render':
      // Render-Ergebnisse behandeln
      break
    default:
      break
  }
}

Diese Metriken funktionieren in allen Browsern, die die User Timing API unterstützen.

Ergebnisse an externe Systeme senden

Sie können Ergebnisse an jeden Endpunkt senden, um die Leistung echter Benutzer auf Ihrer Website zu messen und zu verfolgen. Zum Beispiel:

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'
 
  // Verwenden Sie `navigator.sendBeacon()`, falls verfügbar, andernfalls fallen Sie auf `fetch()` zurück.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

Hinweis: Bei Verwendung von Google Analytics kann die Verwendung des id-Werts es Ihnen ermöglichen, Metrikverteilungen manuell zu konstruieren (zur Berechnung von Perzentilen usw.)

useReportWebVitals((metric) => {
  // Verwenden Sie `window.gtag`, wenn Sie Google Analytics wie in diesem Beispiel initialisiert haben:
  // 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
    ), // Werte müssen Ganzzahlen sein
    event_label: metric.id, // id, die zum aktuellen Seitenaufruf eindeutig ist
    non_interaction: true, // vermeidet Einfluss auf Absprungrate.
  })
})

Weitere Informationen zum Senden von Ergebnissen an Google Analytics.