افزودن آنالیتیکس به Next.js – گزارش Web Vitals، ردیابی خطا و ارسال داده به سرویس‌های خارجی

مقدمه

Next.js به‌صورت داخلی از گزارش‌گیری عملکرد پشتیبانی می‌کند. می‌توانید از هوک useReportWebVitals برای مدیریت گزارش‌ها استفاده کنید یا از سرویس مدیریت‌شده Vercel بهره ببرید.

ردیابی سمت کلاینت با instrumentation-client

برای آنالیتیکس پیشرفته، فایل instrumentation-client.js یا .ts را در ریشهٔ پروژه ایجاد کنید. این فایل قبل از اجرای frontend اجرا می‌شود:

// instrumentation-client.js
console.log('Analytics initialized')

window.addEventListener('error', (event) => {
  reportError(event.error)
})

ساخت کامپوننت WebVitals

برای گزارش Web Vitals، کامپوننتی جداگانه با دستور 'use client' بسازید:

// app/_components/web-vitals.js
'use client'
import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
}

سپس آن را در layout وارد کنید:

// app/layout.js
import { WebVitals } from './_components/web-vitals'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  )
}

Web Vitals چیست؟

Web Vitals مجموعه‌ای از معیارهای عملکرد هستند که تجربهٔ کاربر را اندازه‌گیری می‌کنند:

TTFB – زمان تا اولین بایت
FCP – اولین محتوای قابل مشاهده
LCP – بزرگ‌ترین محتوای قابل مشاهده
FID – تأخیر اولین تعامل
CLS – جابه‌جایی چیدمان تجمعی
INP – تعامل تا نقاشی بعدی

می‌توانید با استفاده از metric.name هر مورد را جداگانه مدیریت کنید:

useReportWebVitals((metric) => {
  switch (metric.name) {
    case 'FCP': {
      // handle FCP
    }
    case 'LCP': {
      // handle LCP
    }
    // ...
  }
})

ارسال داده‌ها به سرویس‌های خارجی

برای ارسال داده‌ها به یک endpoint خارجی:

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'

  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

ادغام با Google Analytics

اگر از Google Analytics استفاده می‌کنید، می‌توانید از window.gtag برای ارسال داده‌ها استفاده کنید:

useReportWebVitals((metric) => {
  window.gtag('event', metric.name, {
    value: Math.round(
      metric.name === 'CLS' ? metric.value * 1000 : metric.value
    ),
    event_label: metric.id,
    non_interaction: true,
  })
})

جمع‌بندی

Next.js ابزارهای قدرتمندی برای اندازه‌گیری عملکرد و ردیابی خطا ارائه می‌دهد. با استفاده از Web Vitals، instrumentation-client، و ارسال داده‌ها به سرویس‌های خارجی، می‌توانید تجربهٔ کاربری را به‌صورت دقیق تحلیل و بهینه‌سازی کنید.