Duplicate Core Web Vital metrics on soft navigations when using `useReportWebVitals` in Pages router

[glifchits]

Link to the code that reproduces this issue

https://github.com/glifchits/next-cwv-pages-router-repro

To Reproduce

1. Build a Next.js pages router application and implement useReportWebVitals following instructions in the documentation (code in repro repository)
2. Observe the emitted CWV events, paying attention to the events emitted after a soft navigation ("client-side navigation" as implemented by next/link)

Current vs. Expected behavior

Current: after a pages router soft navigation, useReportWebVitals emits duplicate metrics such as LCP, TTFB, etc.

Expected: soft navigations do not cause metrics to be emitted by default. Particularly not with values that duplicate the first emitted metric values.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:54:49 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.1.0
  npm: 10.7.0
  Yarn: 1.22.22
  pnpm: 10.2.0
Relevant Packages:
  next: 15.3.2 // Latest available version is detected (15.3.2).
  eslint-config-next: 15.3.2
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Instrumentation

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Other (Deployed)

Additional context

CWV on soft navigations are experimental and there's a case to be made for opting-in to the experimental measurement, however the duplicate measurements seem like the bigger issue, as this could bias production RUM measurements.

I have tested this in app router, and following the documentation (adding a client component to the root layout), it seems to be working aligned with my expectation. So this seems like a bug with how the hook behaves in pages router.

In our pages router implementation of CWV tracking, we add a function that's executed in the client runtime on the global scope of _app.tsx and this seems to produce the expected behaviour I described above. So long as my understanding of the CWV reporting behaviour is accurate, I'm not sure if a React hook is the correct API for pages router, and perhaps the docs should recommend a different approach.

[DiegoDev2]

Don't put useReportWebVitals inside the component.
What you do is move it outside and export a function called reportWebVitals, and Next.js will call it once per real metric.

Here’s what I use in _app.tsx:

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { useReportWebVitals } from "next/web-vitals";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export function reportWebVitals(metric: any) {
  console.log("NEXT CWV", metric.name, metric.value);
}

And the log looks like this:

[HMR] connected
[Fast Refresh] done in NaNms
NEXT CWV Next.js-hydration 165.1
NEXT CWV: Navigating to Page 1
NEXT CWV Next.js-render 155
NEXT CWV Next.js-route-change-to-render 193.2

Provide environment information

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
    Memory: 90.57 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 22.15.1 - /usr/local/bin/node
    npm: 10.9.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 128.0.6613.138
    Safari: 13.1.3
  npmPackages:
    next: 15.3.2 => 15.3.2 
    react: ^19.0.0 => 19.1.0 
    react-dom: ^19.0.0 => 19.1.0 
    typescript: ^5 => 5.8.3 

[DiegoDev2]

honestly, I get where you're coming from. I probably would’ve been confused too — your implementation actually follows the official docs, so it totally makes sense to expect it to work correctly.

The problem is, in the Pages Router, using useReportWebVitals inside the App component causes metrics to be reported multiple times on soft navigations. But that’s not obvious from the docs at all.

Exporting reportWebVitals outside the component (as a named export) avoids the duplicates, since Next.js calls it only once per actual metric.

So yeah — good catch. It’s not just a bug, it’s also a documentation issue.

[icyJoseph]

Hi,

Yeah, this is because the web-vitals library, reports available metrics upon subscription. And we subscribe when the function reference changes. One way to fix this, is to keep the reference stable. I've made some doc change suggestions.