Analytics

Next.js, performans metriklerini ölçmek ve raporlamak için yerleşik desteğe sahiptir. Raporlamayı kendiniz yönetmek için useReportWebVitals kancasını kullanabilir ya da alternatif olarak Vercel, sizin için metrikleri otomatik olarak toplamak ve görselleştirmek için yönetilen bir hizmet sağlar.

Build Your Own

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'
 
function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
 
  return <Component {...pageProps} />
}

Daha fazla bilgi için API Referansını görüntüleyin.

Web Vitals

Web Vitals, bir web sayfasının kullanıcı deneyimini yakalamayı amaçlayan bir dizi yararlı metriktir. Aşağıdaki web hayati değerlerinin tümü dahildir:

Bu metriklerin tüm sonuçlarını name özelliğini kullanarak işleyebilirsiniz.

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'
 
function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // handle FCP results
      }
      case 'LCP': {
        // handle LCP results
      }
      // ...
    }
  })
 
  return <Component {...pageProps} />
}

Custom Metrics

Yukarıda listelenen temel metriklere ek olarak, sayfanın nemlenmesi ve işlenmesi için geçen süreyi ölçen bazı ek özel metrikler de vardır:

Next.js-hydration: Sayfanın nemlendirmeye başlaması ve bitirmesi için geçen süre (ms cinsinden)
Next.js-route-change-to-render: Bir rota değişikliğinden sonra sayfanın oluşturulmaya başlaması için geçen süre (ms cinsinden)
Next.js-render: Rota değişikliğinden sonra bir sayfanın işlenmesinin tamamlanması için geçen süre (ms cinsinden)

Bu metriklerin tüm sonuçlarını ayrı ayrı ele alabilirsiniz:

export function reportWebVitals(metric) {
  switch (metric.name) {
    case 'Next.js-hydration':
      // handle hydration results
      break
    case 'Next.js-route-change-to-render':
      // handle route-change to render results
      break
    case 'Next.js-render':
      // handle render results
      break
    default:
      break
  }
}

Bu ölçümler Kullanıcı Zamanlama API'sini destekleyen tüm tarayıcılarda çalışır .

Sending results to external systems

Sitenizdeki gerçek kullanıcı performansını ölçmek ve izlemek için sonuçları herhangi bir uç noktaya gönderebilirsiniz. Örneğin:

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'
 
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

Bilmekte fayda var: Google Analytics kullanıyorsanız,id değerini kullanmak metrik dağılımlarını manuel olarak oluşturmanıza (yüzdelik dilimleri hesaplamak vb.) olanak sağlayabilir.

useReportWebVitals(metric => {
  // Use `window.gtag` if you initialized Google Analytics as this example:
  // 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), // values must be integers
    event_label: metric.id, // id unique to current page load
    non_interaction: true, // avoids affecting bounce rate.
  });
}

Sonuçları Google Analytics'e gönderme hakkında daha fazla bilgi için .