Rapports personnalisés

Il est également possible d'utiliser le relais intégré que Next.js Speed Insights utilise et d'envoyer les données à votre propre service ou de les transmettre à Google Analytics.

Voyons comment nous pourrions ajouter cela maintenant. Nous pouvons l'ajouter à l'application de démonstration que nous avons optimisée.

Nous utiliserons un console.log pour visualiser les métriques en temps réel.

Pour ce faire, nous pouvons exploiter la fonction reportWebVitals fournie par Next.js.

Remarque : Ceci n'est PAS nécessaire si vous venez de terminer les leçons précédentes.

npx create-next-app@latest nextjs-lighthouse --use-npm --example "https://github.com/vercel/next-learn/tree/main/seo"

Ouvrez pages/_app.js et exportez la fonction suivante :

export function reportWebVitals(metric) {
  console.log(metric);
}

Ensuite, construisez et démarrez votre application :

npm run build && npm run start

Si vous ouvrez Chrome, vous verrez les métriques dans la console DevTools. Vous remarquerez également que FID ne se déclenchera qu'une fois que vous interagirez avec la page.

Pour aller plus loin

• Next.js : Mesurer les performances