How to Collect and Analyze Web Vitals from Next.js for Page Experience

Google's Web Vitals project is becoming the standard for measuring page experience. As of version 9.4 of Next.js, the framework provides a built-in method for capturing and reporting Core Web Vitals. This post illustrates how to collect Web Vitals metrics from a Next.js app and send them to a service for storage.

Page experience is a set of signals that measure how users perceive the experience of interacting with a web page beyond its pure information value. It includes Core Web Vitals, which is a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page.

~ Understanding Google Page Experience | Google Search Central

Google has announced that page experience signals will be included in Google Search ranking, rolling out gradually in 2021.

Next.js is a framework for React, providing an awesome developer experience. It standardizes development and distribution of hybrid static sites and server side rendering. Version 9.4 and up offers exciting features including performance and page experience analytics outlined in this post.

Monitoring Web Vitals in Next.js

In the post linked below, you can find steps to setup an account with Foo and monitor Web Vitals. We'll take this further, specifically for Next.js.

How to Track and Analyze Web Vitals to Boost SEO: Getting Started

A guide for getting started with Web Vitals. With our simple integration you can collect, track and analyze Web Vitals data in charts with filtering options by OS, browser and device.

Foo, software engineering services for website qualityAdam Henson

If your website is built with Next.js, the steps are even easier for collecting and analyzing Web Vitals. The Web Vitals library is included out of the box! Next.js exposes a new method called reportWebVitals that provides a designated part of code where we can collect Core Web Vitals metrics and do what we like with them, as explained in Next.js docs. By combining the solution from the docs with Foo's Web Vitals service, we can use code similar to the below to collect Web Vitals metrics and send them via Foo's REST API.

// pages/_app.js
const YOUR_ACCOUNT_ID = 'abcdefg';
const VITALS_URL = 'https://www.foo.software/api/vitals';

export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    const body = JSON.stringify({
      accountId: YOUR_ACCOUNT_ID,
      name: metric.name,
      url: window.location.href,
      value: metric.value,
    });
  
    return (
      (
        navigator.sendBeacon
        && navigator.sendBeacon(VITALS_URL, body)
      ) || fetch(VITALS_URL, {
        body,
        method: 'POST',
        keepalive: true,
        headers: {
          'Content-Type': 'application/json',
        },
      })
    );
  }
}

In the above code, you would simply replace YOUR_ACCOUNT_ID with your account ID on Foo per instructions in the this article. Note these points about the code above:

1. Next.js provides Web Vitals metrics out of the box from the argument of the reportWebVitals method. It holds custom metrics, but at the moment we're only concerned about Web Vitals. We use metric.label === 'web-vital'  to validate.
2. From within the if block noted above, we can do anything with the metric object. In this example we send the data to Foo's API to be stored and available in Foo's dashboard. You could replace this with a custom solution or send to a different service, but why would we recommend that :D
3. We attempt to send the data with the browser navigator.sendBeacon method but fallback to fetch if sendBeacon isn't supported. With the sendBeacon method, the data is transmitted asynchronously when the user agent has an opportunity to do so, without delaying unload or the next navigation. Read more about sendBeacon on MDN.

By adding the above code to your Next.js website, you can now analyze and monitor your Web Vitals metrics over time on Foo!