Next.js - userReportWebVitals() Function

---

---

The userReportWebVitals() Function

The Next.js userReportWebVitals() function is used to report Web Vitals such as Time to First Byte (TTFB), First Contentful Paint (FCP), Largest Contentful Paint (LCP), etc. to analytics tools.

What are Web Vitals?

Web vitals are a set of metrics that measure the performance of a web page. These metrics help developers to understand the user experience and identify areas for improvement in website. The key Web Vitals include:

• FCP(First Contentful Paint): The time it takes for the first content to be rendered on the screen.
• TBT(Total Blocking Time): The total amount of time the page is blocked from responding to user input.
• LCP(Large Contentful Paint): The time it takes for the largest content element to be rendered on the screen.
• TTFB(Time to First Byte): The time it takes for the server to respond to the initial request.

Syntax

Following is syntax of userReportWebVitals() function:

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

Parameters

The useReportWebVitals() function takes a metric object as its parameter. The object will have following properties:

• name: The name of the metric (e.g., FCP, LCP, etc.)
• id: Unique identifier for the metric in the context of the current page load
• delta: The difference between the current value and the previous value of the metric
• entries: An array of performance entries associated with the metric
• navigationType: Indicates the type of navigation that triggered the metric collection.
• rating: A qualitative rating of the metric value, providing an assessment of the performance.
• value: The actual value or duration of the performance entry, typically in milliseconds.

Return Value

The function does not return any value.

Example 1

The example below shows simple implementation of userReportWebVitals() function. We displayed the metric object on the page using useState hook:

import { useState } from 'react';
import { useReportWebVitals } from 'next/web-vitals';

export default function Home() {
    const [metric, setMetric] = useState(null);

    useReportWebVitals((metric) => {
        setMetric(metric);
    });

    return (
        <div>
            <h2>Welcome to the Next JS page!</h2>
            <p>{JSON.stringify(metric)}</p>
        </div>
    );
}

Output

Example 2

The following code snippet shows how to send the Web Vitals data to an analytics endpoint using the navigator.sendBeacon() method. If the sendBeacon() method is not available, it falls back to using the fetch() method:

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