Analytics

Next.js intègre nativement la capacité de mesurer et de rapporter des métriques de performance. Vous pouvez soit utiliser le hook useReportWebVitals pour gérer le reporting vous-même, soit utiliser le service géré de Vercel qui collecte et visualise automatiquement les métriques pour vous.

Implémentation personnalisée

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>
  )
}

Comme le hook useReportWebVitals nécessite la directive "use client", l'approche la plus performante consiste à créer un composant séparé importé par le layout racine. Cela limite la frontière client exclusivement au composant WebVitals.

Consultez la Référence API pour plus d'informations.

Web Vitals

Les Web Vitals sont un ensemble de métriques visant à capturer l'expérience utilisateur d'une page web. Les métriques suivantes sont incluses :

Vous pouvez traiter tous les résultats de ces métriques en utilisant la propriété name.

'use client'

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

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // traiter les résultats FCP
      }
      case 'LCP': {
        // traiter les résultats LCP
      }
      // ...
    }
  })
}

'use client'

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

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // traiter les résultats FCP
      }
      case 'LCP': {
        // traiter les résultats LCP
      }
      // ...
    }
  })
}

Envoi des résultats à des systèmes externes

Vous pouvez envoyer les résultats à n'importe quel endpoint pour mesurer et suivre les performances réelles des utilisateurs sur votre site. Par exemple :

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

  // Utilisez `navigator.sendBeacon()` si disponible, sinon utilisez `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

Bon à savoir : Si vous utilisez Google Analytics, la valeur id permet de construire manuellement des distributions de métriques (pour calculer des percentiles, etc.)

useReportWebVitals((metric) => {
  // Utilisez `window.gtag` si vous avez initialisé Google Analytics comme dans cet exemple :
  // 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
    ), // les valeurs doivent être des entiers
    event_label: metric.id, // id unique au chargement de la page actuelle
    non_interaction: true, // évite d'affecter le taux de rebond.
  })
})

En savoir plus sur l'envoi de résultats à Google Analytics.

Implémentation personnalisée

Web Vitals

Envoi des résultats à des systèmes externes

On this page