آنالیز Analytics

Next.js دارای پشتیبانی داخلی برای اندازه‌گیری و گزارشگیری از معیارهای عملکرد است. شما می‌توانید یا از هوک useReportWebVitals برای مدیریت گزارشگیری خود استفاده کنید، یا به طور جایگزین، Vercel یک سرویس مدیریت شده (opens in a new tab) فراهم می‌کند که به صورت خودکار معیارها را جمع‌آوری و تجسم کند.

ایجاد گزارش‌دهی سفارشی

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 نیازمند دستورالعمل "use client" است، بهترین روش برای بهبود عملکرد، ساخت یک کامپوننت مجزا و فراخوانی آن در طرح بندی ریشه (Root Layout) است. با این کار محدوده کد سمت کلاینت (Client-side) تنها به کامپوننت WebVitals اختصاص می‌یابد.

برای اطلاعات بیشتر، مراجعه کنید به مرجع API.

Web Vitals

Web Vitals (opens in a new tab) مجموعه ای از معیارهای مفید هستند که به درک تجربه کاربری یک صفحه وب کمک می‌کنند. Next.js به طور پیش‌فرض این معیارها را اندازه‌گیری می‌کند:

شما می‌توانید با استفاده از خاصیت name نتایج مربوط به هر معیار را مدیریت کنید.

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

ارسال نتایج به سیستم‌های خارجی

شما می‌توانید نتایج را به هر endpointی ارسال کنید تا عملکرد واقعی کاربران را در سایت خود اندازه‌گیری و ردیابی کنید. به عنوان مثال:

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

خوب است بدانید: اگر از Google Analytics (opens in a new tab) استفاده می‌کنید، با استفاده از مقدار id می‌توانید توزیع دستی معیارها (برای محاسبه‌ی درصد و غیره) را انجام دهید.

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

برای مطالعه‌ی بیشتر در مورد ارسال نتایج به Google Analytics (opens in a new tab)، منابع مربوطه را مطالعه کنید.

بارگیری تنبل Lazy ابزارنگاری