التحليلات

يحتوي Next.js على دعم مدمج لقياس وإعداد تقارير لمقاييس الأداء. يمكنك استخدام خطاف useReportWebVitals لإدارة التقارير بنفسك، أو بدلاً من ذلك، تقدم Vercel خدمة مدارة لجمع وعرض المقاييس تلقائيًا لك.

بناء نظامك الخاص

import { useReportWebVitals } from 'next/web-vitals'

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    console.log(metric)
  })

  return <Component {...pageProps} />
}

اطلع على مرجع API لمزيد من المعلومات.

مؤشرات الويب الحيوية (Web Vitals)

مؤشرات الويب الحيوية هي مجموعة من المقاييس المفيدة التي تهدف إلى التقاط تجربة المستخدم لصفحة الويب. تتضمن المؤشرات الحيوية التالية:

• الوقت حتى أول بايت (TTFB)
• الرسم الأول للمحتوى (FCP)
• أكبر رسم للمحتوى (LCP)
• تأخر أول إدخال (FID)
• تراكم تحول التخطيط (CLS)
• التفاعل حتى الرسم التالي (INP)

يمكنك التعامل مع جميع نتائج هذه المقاييس باستخدام خاصية name.

import { useReportWebVitals } from 'next/web-vitals'

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // handle FCP results
      }
      case 'LCP': {
        // handle LCP results
      }
      // ...
    }
  })

  return <Component {...pageProps} />
}

مقاييس مخصصة

بالإضافة إلى المقاييس الأساسية المذكورة أعلاه، هناك بعض المقاييس المخصصة الإضافية التي تقيس الوقت الذي تستغرقه الصفحة للترطيب (hydration) والعرض:

• Next.js-hydration: الوقت الذي تستغرقه الصفحة لبدء وإنهاء الترطيب (بالميلي ثانية)
• Next.js-route-change-to-render: الوقت الذي تستغرقه الصفحة لبدء العرض بعد تغيير المسار (بالميلي ثانية)
• Next.js-render: الوقت الذي تستغرقه الصفحة لإنهاء العرض بعد تغيير المسار (بالميلي ثانية)

يمكنك التعامل مع جميع نتائج هذه المقاييس بشكل منفصل:

export function reportWebVitals(metric) {
  switch (metric.name) {
    case 'Next.js-hydration':
      // handle hydration results
      break
    case 'Next.js-route-change-to-render':
      // handle route-change to render results
      break
    case 'Next.js-render':
      // handle render results
      break
    default:
      break
  }
}

تعمل هذه المقاييس في جميع المتصفحات التي تدعم واجهة برمجة تطبيقات توقيت المستخدم (User Timing API).

إرسال النتائج إلى أنظمة خارجية

يمكنك إرسال النتائج إلى أي نقطة نهاية لقياس وتتبع أداء المستخدم الحقيقي على موقعك. على سبيل المثال:

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

  // استخدم `navigator.sendBeacon()` إذا كان متاحًا، مع التراجع إلى `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

ملاحظة جيدة: إذا كنت تستخدم Google Analytics، فإن استخدام قيمة id يمكن أن يسمح لك ببناء توزيعات المقاييس يدويًا (لحساب النسب المئوية، إلخ.)

useReportWebVitals((metric) => {
  // استخدم `window.gtag` إذا قمت بتهيئة Google Analytics كما في هذا المثال:
  // 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
    ), // يجب أن تكون القيم أعدادًا صحيحة
    event_label: metric.id, // معرف فريد لتحميل الصفحة الحالي
    non_interaction: true, // يتجنب التأثير على معدل الارتداد.
  })
})

اقرأ المزيد عن إرسال النتائج إلى Google Analytics.