التحليلات

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

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

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"، فإن النهج الأكثر كفاءة هو إنشاء مكون منفصل يستورده التخطيط الجذري. هذا يحصر حدود العميل حصريًا في مكون WebVitals.

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

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

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

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

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

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

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

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

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.

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

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

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

On this page