From cf01366418b2c09a3df332d8650d5e70b5ac528c Mon Sep 17 00:00:00 2001 From: Jimmy Chion Date: Wed, 28 Feb 2024 12:33:18 -0500 Subject: [PATCH] [docs] update analytics doc to use `useReportWebVitals` (again) Closes #62653 Finishes the job started by https://github.com/vercel/next.js/pull/58196 and updates the last remaining code example that uses `reportWebVitals` to use `useReportWebVitals` --- .../04-functions/use-report-web-vitals.mdx | 36 +++++++++++-------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/docs/02-app/02-api-reference/04-functions/use-report-web-vitals.mdx b/docs/02-app/02-api-reference/04-functions/use-report-web-vitals.mdx index 3a150ff1d6d7a..74103b6be4c14 100644 --- a/docs/02-app/02-api-reference/04-functions/use-report-web-vitals.mdx +++ b/docs/02-app/02-api-reference/04-functions/use-report-web-vitals.mdx @@ -164,21 +164,27 @@ measure the time it takes for the page to hydrate and render: You can handle all the results of these metrics separately: -```js -export function reportWebVitals(metric) { - switch (metric.name) { - case 'Next.js-hydration': - // handle hydration results - break - case 'Next.js-route-change-to-render': - // handle route-change to render results - break - case 'Next.js-render': - // handle render results - break - default: - break - } +```jsx filename="pages/_app.js" +import { useReportWebVitals } from 'next/web-vitals' + +function MyApp({ Component, pageProps }) { + useReportWebVitals((metric) => { + switch (metric.name) { + case 'Next.js-hydration': + // handle hydration results + break + case 'Next.js-route-change-to-render': + // handle route-change to render results + break + case 'Next.js-render': + // handle render results + break + default: + break + } + }) + + return } ```