Analytics

Next.js bietet integrierte Unterstützung für das 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 Service an, der Metriken automatisch sammelt und visualisiert.

Eigenes System aufbauen

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

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    console.log(metric)
  })

  return <Component {...pageProps} />
}

Weitere Informationen finden Sie in der API-Referenz.

Web Vitals

Web Vitals sind eine Sammlung nützlicher Metriken, die das Nutzererlebnis einer Webseite erfassen sollen. Folgende Web Vitals sind enthalten:

• Time to First Byte (TTFB)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)
• Interaction to Next Paint (INP)

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

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

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // FCP-Ergebnisse verarbeiten
      }
      case 'LCP': {
        // LCP-Ergebnisse verarbeiten
      }
      // ...
    }
  })

  return <Component {...pageProps} />
}

Benutzerdefinierte Metriken

Zusätzlich zu den oben aufgeführten Kernmetriken gibt es einige benutzerdefinierte Metriken, die die Zeit messen, die die Seite für die Hydration und das Rendering benötigt:

• Next.js-hydration: Zeit, die die Seite für den Start und Abschluss der Hydration benötigt (in ms)
• Next.js-route-change-to-render: Zeit, die eine Seite nach einer Routenänderung für den Render-Start benötigt (in ms)
• Next.js-render: Zeit, die eine Seite nach einer Routenänderung für den Render-Abschluss benötigt (in ms)

Sie können alle Ergebnisse dieser Metriken separat verarbeiten:

export function reportWebVitals(metric) {
  switch (metric.name) {
    case 'Next.js-hydration':
      // Hydration-Ergebnisse verarbeiten
      break
    case 'Next.js-route-change-to-render':
      // Route-Change-zu-Render-Ergebnisse verarbeiten
      break
    case 'Next.js-render':
      // Render-Ergebnisse verarbeiten
      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 beliebige Endpunkte senden, um die Leistung Ihrer Seite bei echten Nutzern zu messen und zu verfolgen. Beispiel:

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

  // `navigator.sendBeacon()` verwenden, falls verfügbar, sonst auf `fetch()` zurückgreifen.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

Gut zu wissen: Wenn Sie Google Analytics verwenden, können Sie mit dem id-Wert manuell Metrikverteilungen erstellen (um Perzentile etc. zu berechnen).

useReportWebVitals((metric) => {
  // `window.gtag` verwenden, wenn Sie Google Analytics wie in diesem Beispiel initialisiert haben:
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
  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 eindeutig für aktuellen Seitenaufruf
    non_interaction: true, // vermeidet Beeinflussung der Absprungrate.
  })
})

Lesen Sie mehr über das Senden von Ergebnissen an Google Analytics.