Next.js 9.4 - Core Web Vitals

Cover Image for Next.js 9.4 - Core Web Vitals

With Next.js 9.4 some new features have been added. Here in this article, we want to take a look at a feature that does not look very big at first. It is about the Web Vitals.

"Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web."

So it is possible to measure certain values by which we can see if our website works fast and reliable. If you want to read more about this you can do so directly at Google: https://web.dev/vitals/

But how can we use this in Next.js now?

In the _app.js we can export a function called: reportWebVitals which is called whenever the browser returns a metric value.

export function reportWebVitals(metric) {
  // These metrics can be sent to any analytics service
  console.log(metric);
}

We can now send this data to a service of our choice. As an example, I show how to send the data to Google Analytics using react-ga.

export function reportWebVitals(metric) {
  ReactGA.timing({
    category: metric.label,
    value: metric.value,
    label: metric.name,
    variable: metric.id,
  });
}