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

| Web Vitals |

| useReportWebVitals |

| instrumentation-client |

| Google Analytics |

مقدمه

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، و ارسال داده‌ها به سرویس‌های خارجی، می‌توانید تجربهٔ کاربری را به‌صورت دقیق تحلیل و بهینه‌سازی کنید.