Next.js from the Ground Up with Cassidy Williams
In this stage, we'll learn about the Web Vitals and Custom Metrics API built in to Next.js and how to use it.
[00:00:00] Because of how React and Next.js are built, you get a lot of performance benefits out of the box. Between the automatic code splitting and really just efficient code under the hood, [00:00:10] it's pretty nice that you get a lot of performance benefits for free, but that doesn't mean that you shouldn't try to improve it. There's some really great options built into Next.js [00:00:20] for measuring performance. Next.js has a built-in relayer that actually allows you to analyze and measure the performance of each of your pages using a variety of different metrics.
[00:00:30] Now, in this big _app.js file, I'm going to be pasting something large, but don't worry, I'll walk through it. We have a function called [00:00:40] reportWebVitals, and this is built into Next.js. You can measure any supported metrics in Next.js through this relayer right here.
[00:00:50] It takes in a variable called metric and then each of the metric names are these metrics down here. This first one, FCP is First [00:01:00] Contentful Paint. The next one LCP is Largest Contentful Paint. The next one is Cumulative Layout Shift. The one after that is [00:01:10] First Input Delay. After that is Time to First Bite. Then, these are some Next.js-specific ones. First of all, we have Next.js-hydration, which is the length of [00:01:20] time it takes for the page to start and finish hydrating. Then, we have Next.js-route-change-to-render, which is the length of time it takes for a page to start rendering after [00:01:30] a route change. Then, this last one, Next.js-render, is the length of time it takes for the page to finish rendering after a route change.