Jamstack Explorers

Next.js from the Ground Up with Cassidy Williams

Next.js Performance

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.

[00:01:40] Between all of these, you can measure these pretty much in any way you want. You could do just a very simple console.log and then metric, and then [00:01:50] see what shows up, but you can do something even more powerful than that. You could write something, for example, that goes to your chosen analytics platform. You could make a post request [00:02:00] to a certain API that you've built to measure things. You have a lot of very flexible options, and it's just JavaScript in here where you can take that metric and use it to your heart's content to [00:02:10] measure your performance and then improve on it. That's the power of performance and measuring performance in Next.js. [00:02:20][00:02:22]


your progress