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.

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:
- 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 usemetric.label === 'web-vital'
to validate. - From within the
if
block noted above, we can do anything with themetric
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 - We attempt to send the data with the browser
navigator.sendBeacon
method but fallback tofetch
ifsendBeacon
isn't supported. With thesendBeacon
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 aboutsendBeacon
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!
