Adding Analytics to Your Next.js Application – Web Vitals, Error Tracking, and External Reporting

Next.js offers built-in tools for measuring performance and reporting analytics. This article explains how to use the useReportWebVitals hook, set up instrumentation-client for global tracking, and send metrics to external services like Google Analytics or custom endpoints.

Web VitalsuseReportWebVitalsinstrumentation-clientGoogle Analytics

Introduction

Next.js includes built-in support for performance analytics. You can use the useReportWebVitals hook to manage metrics manually, or rely on Vercel’s managed service for automatic collection and visualization.

Client Instrumentation

For advanced tracking, create an instrumentation-client.js or .ts file in your project root. This file runs before your frontend code and is ideal for initializing global analytics or error tracking:

// instrumentation-client.js
console.log('Analytics initialized')

window.addEventListener('error', (event) => {
  reportError(event.error)
})

Creating a WebVitals Component

To report Web Vitals, create a separate client component:

// app/_components/web-vitals.js
'use client'
import { useReportWebVitals } from 'next/web-vitals'

export function WebVitals() {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
}

Then import it in your root layout:

// app/layout.js
import { WebVitals } from './_components/web-vitals'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  )
}

What Are Web Vitals?

Web Vitals are key performance metrics that reflect user experience:

TTFB – Time to First Byte
FCP – First Contentful Paint
LCP – Largest Contentful Paint
FID – First Input Delay
CLS – Cumulative Layout Shift
INP – Interaction to Next Paint

You can handle each metric using its name property:

useReportWebVitals((metric) => {
  switch (metric.name) {
    case 'FCP': {
      // handle FCP
    }
    case 'LCP': {
      // handle LCP
    }
    // ...
  }
})

Sending Metrics to External Services

To send metrics to a custom 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 })
  }
})

Integrating with Google Analytics

If you use Google Analytics, you can send metrics using 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,
  })
})

Conclusion

Next.js provides powerful tools for performance tracking and analytics. With Web Vitals, instrumentation-client, and external reporting, you can monitor real user experience and optimize your application effectively.

Adding Analytics to Your Next.js Application – Web Vitals, Error Tracking, and External Reporting

Introduction

Client Instrumentation

Creating a WebVitals Component

What Are Web Vitals?

Sending Metrics to External Services

Integrating with Google Analytics

Conclusion

مقالات مرتبط

Advanced Client-Side Routing and Performance Hooks in Next.js

Handling Authorization and Caching in Next.js: A Developer’s Guide

redirect and refresh in Next.js — Smart Redirects and Client Refreshing via Server Actions

NextRequest and NextResponse in Next.js — Managing Cookies, Headers, Redirects, and Rewrites

headers, ImageResponse, notFound, and permanentRedirect in Next.js — Request Handling, Dynamic Images, Errors, and Redirects

A Complete Guide to Using metadata and generateMetadata in Next.js