التقارير المخصصة

من الممكن أيضًا استخدام الناقل المدمج الذي يستخدمه Next.js Speed Insights وإرسال البيانات إلى خدمتك الخاصة أو دفعها إلى Google Analytics.

دعونا نلقي نظرة على كيفية إضافة ذلك الآن. يمكننا إضافته إلى التطبيق التجريبي الذي كنا نقوم بتحسينه.

سوف نستخدم console.log لعرض المقاييس في الوقت الفعلي.

للقيام بذلك، يمكننا الاستفادة من دالة reportWebVitals المقدمة من Next.js.

ملاحظة: هذا ليس ضروريًا إذا كنت قد أكملت الدروس السابقة.

npx create-next-app@latest nextjs-lighthouse --use-npm --example "https://github.com/vercel/next-learn/tree/main/seo"

افتح ملف pages/\_app.js وقم بتصدير الدالة التالية:

export function reportWebVitals(metric) {
  console.log(metric);
}

ثم قم ببناء وتشغيل تطبيقك:

npm run build && npm run start

إذا فتحت متصفح Chrome، فسترى المقاييس داخل وحدة تحكم أدوات المطورين. ستلاحظ أيضًا أن FID سيتم تشغيله فقط عند التفاعل مع الصفحة.

قراءة إضافية

• Next.js: قياس الأداء