Пользовательская отчетность

Также можно использовать встроенный ретранслятор, который использует Next.js Speed Insights, и отправлять данные в ваш собственный сервис или передавать их в Google Analytics.

Давайте рассмотрим, как можно это реализовать. Мы добавим эту функциональность в демонстрационное приложение, которое мы оптимизировали.

Мы будем использовать console.log для просмотра метрик в реальном времени.

Для этого можно воспользоваться функцией reportWebVitals, предоставляемой Next.js.

Примечание: Это НЕ требуется, если вы только что завершили предыдущие уроки.

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

Откройте pages/\_app.js и экспортируйте следующую функцию:

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

Затем соберите и запустите ваше приложение:

npm run build && npm run start

Если вы откроете Chrome, то увидите метрики в консоли DevTools. Вы также заметите, что FID срабатывает только после взаимодействия со страницей.

Дополнительные материалы

• Next.js: Измерение производительности