Hands On: How To Migrate To Next.js 16 and "Use Cache”

[Music] Welcome to Nexcom 2025. Today we will working on migrating a NexJS application from what it was next 15 or segment configuration the typical router to use cache. I'm Gon. I'm a senior solutions engineer here at GCEL in the professional services team. And today we will learn how to migrate a very simple blog application to cache components. As

you might see, those are the exact same picture because cache components are not something you will see in the UI itself. It's a new set of features designed to make caching Nex.js both more explicit but flexible at the same time. They center around partial pre-rendering and the new use cache directive that can be used in pages. It can be used in functions improving the X and performance. So to learn how to use it

properly, we will just be coding a lot. We will lock in and do stuff. So I will ask you to just close the lid of your laptop. Don't code stuff. I know it's what I do when I go to places. They say don't do it and I will just do it. But just trust me. Just close your lid. Pay attention because I will be coding a lot and I will be doing the first three tasks of a challenge you will have to do

while you watch. And then I will watch you doing those same three exercises plus like a couple more exercises you will have to do while I watch you, right? Uh, I will watch you and I will shut you. No, just kidding. We have a bunch of mentors here in the room that will help you out. So, can you just raise your hand? Mentors, whatever you are. Okay, perfect. Awesome. H. So, they will be in the room to help you out. Just raise your hand. Feel free to ask any help you need and they will be there

in no time. Just from YouTube. Erh, and if you don't have a computer or if you are friends with someone, just make friends of people around you. If you didn't don't feel like coding or you don't have your computer, you can just work together. And 15 minutes before the end, we will do a small quid uh quiz with prizes. So, just pay enough attention to win one of our blue versel t-shirts from the swag store. So if we are ready to start we can start

coding. Um let me see how this is. Can we switch to the mirror? Thank you. Perfect. So let let's first verify the the zoom. Do you see in the in in the background? Can you see the screen correctly or do you need more zoom? More. Okay, that's it. Good. I will I have never worked with

this amount of zoom. So I will do my best. So this is um a readme. I will share the repository with you in a couple of minutes once we finish. And again I will work in an XS application 15 application with cache configuration a router and stuff and we will migrate it to use cache. The first thing we have to do is run the server. If I don't have it running I will just restart it just in case. And I think I have How do I remove this?

Okay, good. Good. Good. And let's open local 3000. Let's go to the homepage. Good. Refresh. Perfect. So we'll have a simple application that shows some stats of all the posts we have the categories we have and the average read time and a list of featured posts. This page is a dynam a static page on the homepage