Benutzerdefinierte Berichterstattung

Es ist auch möglich, den integrierten Relayer zu nutzen, den Next.js Speed Insights verwendet, und die Daten an Ihren eigenen Dienst zu senden oder sie an Google Analytics zu übertragen.

Schauen wir uns an, wie wir das jetzt hinzufügen können. Wir können es zu der Demo-App hinzufügen, die wir optimiert haben.

Wir werden einen console.log verwenden, um die Metriken in Echtzeit zu betrachten.

Dafür können wir die reportWebVitals-Funktion nutzen, die von Next.js bereitgestellt wird.

Hinweis: Dies ist NICHT notwendig, wenn Sie gerade die vorherigen Lektionen abgeschlossen haben.

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

Öffnen Sie pages/\_app.js und exportieren Sie die folgende Funktion:

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

Erstellen und starten Sie dann Ihre Anwendung:

npm run build && npm run start

Wenn Sie Chrome öffnen, werden Sie die Metriken in der DevTools-Konsole sehen. Sie werden auch feststellen, dass FID nur ausgelöst wird, wenn Sie mit der Seite interagieren.

Weiterführende Literatur

• Next.js: Leistungsmessung