Einrichtung von 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 Managed Service an, der Metriken automatisch sammelt und visualisiert.

Client-Instrumentierung

Für erweiterte Analyse- und Monitoring-Anforderungen bietet Next.js eine instrumentation-client.js|ts-Datei, die ausgeführt wird, bevor der Frontend-Code Ihrer Anwendung startet. Dies ist ideal für die Einrichtung globaler Analyse-, Fehlerverfolgungs- oder Performance-Monitoring-Tools.

Um sie zu verwenden, erstellen Sie eine instrumentation-client.js oder instrumentation-client.ts-Datei im Stammverzeichnis Ihrer Anwendung:

// Initialisieren Sie Analytics, bevor die App startet
console.log('Analytics initialisiert')

// Richten Sie die globale Fehlerverfolgung ein
window.addEventListener('error', (event) => {
  // Senden Sie den Fehler an Ihren Fehlerverfolgungsdienst
  reportError(event.error)
})

Eigenes Setup erstellen

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 die Nutzererfahrung 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: Dauer, die die Seite für den Start und Abschluss der Hydration benötigt (in ms)
• Next.js-route-change-to-render: Dauer, die eine Seite nach einer Routenänderung für den Render-Start benötigt (in ms)
• Next.js-render: Dauer, 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 realer Nutzer auf Ihrer Website zu messen und zu verfolgen. Beispiel:

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

  // Verwenden Sie `navigator.sendBeacon()`, falls verfügbar, andernfalls `fetch()`.
  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) => {
  // 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 für den aktuellen Seitenladen eindeutig ist
    non_interaction: true, // vermeidet Auswirkungen auf die Absprungrate.
  })
})

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