Next.js 16 + Migration Webinar

Good morning, afternoon, evening to everybody on the call. Uh my name is Dan Lawhorn and I'm joined by Miguel Cabero. We're on the field engineering team here at Verscell. Uh we are very excited about NextJS16 migrations and uh brought together this little webinar today to kind of talk about some of the really cool new features uh that exist in NEX 16, some of the things that are necessary for migrating from previous versions. and uh we're gonna do a pretty deep dive on a particular feature in NEX16 that we are

especially excited about here at Verscell. So uh kind of on the agenda uh we have those new features, some breaking changes. We're going to go into a brief history of rendering just to kind of show you know where we think a lot of you guys on the call might be at and uh how we think that gets us into the future. Uh we want to show just kind of a current example of some e-com some really simple e-commerce code. uh not going to get too deep on an example, but enough that we think people should be pretty familiar with it. And then we're going to kind of talk about that big feature cache components and how we can

refactor into that. Um and then we have a little bit of a discussion of what you can do from there. And then with time left over, uh we'd love to do a little bit of Q&A. We'll have support for questions and Miguel will be kind of in the question section and he might be popping in and out uh to alert me to some of those. So um yeah, let's let's get going. Um, if you go to the Next.js blog, uh, you'll see the the big post that was posted uh, in late October for at Next.js comp for the release of of

Next 16, um, it is a really beefy blog post and we didn't want to just go through line by line of that post because we would have been here well more than an hour. It is a huge release, a lot of years in the making. Um, and if you want to get more information than what we present in this call, um, there's plenty more to be read there. So, nexjs.org/blog, uh, is going to be the place to go for that. Um, we wanted to pick just a couple of the specific new features to

really highlight. Uh, the first is the next.js dev tools MCP. Um if you are doing uh you know local agent work you know your cloud codes your cursors of the world uh you can actually enable an AI agent to diagnose issues explain behavior and suggest fixes directly within your development workflow. Uh the documentation for that is available here on uh the next.js docs. It shows you how to configure that in your code editor or IDE of choice and uh it just shows you all the things that the MCP is going to

be capable of. Uh we do know that you know historically some of the LLMs have had a little bit of a tougher time generating great Nex.js code. Uh this is really going to be a huge boom to anybody who's doing that kind of agent aided development. So feel free to try it out today. Um that is already uh in release and we would love uh feedback that people are getting from from that. Um another really great feature is React compiler support. Uh React compiler automatically memorizes components. So

it reduces unnecessary rerenders with zero manual code changes. Uh basically you know some of that kind of tricky you know why is this thing getting rendered in React some of the stuff that we don't necessarily always go into the inards on. Uh React compiler support in Nex.js is able to take care of a lot of that for us. Uh the only thing uh worth calling out for that is that it does use Babel to do that. So it might add a little bit of time to your compilation. Um but uh once again over on the next.js JS docs. Uh that you can get deeper with

this including how you can do an incremental uh implementation of React compiler. Um there's also improved logging which we'll show a little bit as we're doing the code demo. But you just get a little bit more insight in the logs of um what's happening, how long it's taking, and what each amount of time is uh doing uh when you're both doing uh next dev and next build. Um, so this is really great insights and also helps back with that MCP server because the MCP server is reading the logs and it can get a little bit more insight