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

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

useReportWebVitals kancası "use client" yönergesini gerektirdiğinden, en performanslı yaklaşım kök yerleşimin içe aktardığı ayrı bir bileşen oluşturmaktır. Bu, istemci sınırını yalnızca WebVitals bileşeniyle sınırlar.

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.

app/components/web-vitals.tsx

'use client'
 
import { useReportWebVitals } from 'next/web-vitals'
 
export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // handle FCP results
      }
      case 'LCP': {
        // handle LCP results
      }
      // ...
    }
  })
}

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 .