NextJS 13: Support Web Vitals

[schehata]

Describe the problem you'd like to have solved

The new version of Next JS doesn't support yet reportWebVitals as it were in NextJS 12. I would like to find a different
way to handle web-vitals so that it would work with the new version of nextjs.

Alternatives and current workarounds

check out web-vitals npm package from google.

[schehata]

in progress: #110

[vighnesh153]

Reminder that next@13.2.5 is already released. Need some insights on how we can configure web vitals for the app directory.

[z4nr34l]

@vighnesh153 From what I had seen - it doesn't need config currently.

But anyways there should be a small update of documentation as it's pretty much outdated now.

[schehata]

hey, we have been working on this for a while now, we introduced a new hook in next 13 called useReportWebVitals() and we will use that in next-axiom to send web-vitals to axiom. There is an ongoing PR to solve that.

[z4nr34l]

Thanks @schehata for clarification. If you will need I can be an early-adopter if only you will pass more information to me. :D

[schehata]

I haven't tested this yet, but I guess you could try it. The idea is that you must have a client component that you add to your layout component. This would use a hook that calls into next13 webvitals hooks:

// hook.js
import { useReportWebVitals as useNextReportWebVitals } from 'next/web-vitals';
import { reportWebVitals } from 'next-axiom'

export function useReportWebVitals() {
  useNextReportWebVitals((metric) => reportWebVitals(metric));
}

// components.js
'use client';
import { useReportWebVitals } from './hooks';

export function AxiomWebVitals() {
  useReportWebVitals();
  return null;
}


// use component in your layout

import { AxiomWebVitals } from './components';

export default function Layout({ children }) {
  return (
    <>
      <AxiomWebVitals />
      {children}
    </>
  )
}

I haven't tested the code myself, but the code above should show the main idea.

[z4nr34l]

Thanks! I would test that in this week probably and come with feedback.

[francofantini]

@z4nr34l any luck with code @schehata provided?

[z4nr34l]

I'm currently on
"next": "^13.4.7"
"next-axiom": "^0.18.0"

and no request are sent from browser to axiom, and I can't see any WV reports in axiom aswell :(

It's deployed on my website, so you can check this on your end too.

[z4nr34l]

I've double-checked my code, if there is no problem on my end, but badly it's just not working in my app :(

[bahlo]

Hey everyone, this is working now! Please check out 1.0.0-rc.1 and refer to the current README for instructions. If you run into issues, def. let us know 🙏

[z4nr34l]

@bahlo still no request is sent from user browser to axiom, so this metrics are not provieded to axiom.

Stack info:
Latest Next.js
App dir
next-axiom 1.0.0-rc.1

URL: https://www.zanreal.net/

[z4nr34l]

I've figured it out. Production only mode is made by sharing envs from prodcution in Vercel - with turborepo, production is never built without cache if not forced. I've turborepo in all my projects which caused to not using build with such envs available. Works as intended now.

[bahlo]

glad to hear 🙌