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