NextJS 15: React 19, Less Caching, Turbopack, Better Hydration Errors and MORE from Vercel Ship!

the first release candidate for nextjs 15 is out and that means that we get to take a look at all of the new features they're really cool let me walk through a bunch of them step by step let's get right into [Music] it all right so here are the release notes for XJ S15 of course all of this these links are in the description right down below so you can walk through this yourself we're going to take a look first at the installation stuff so so if you have an existing project then you can use this mpm install to upgrade next and react and react Dum to the release candidates you could also get that information from the mpm package manager you can see the tag is RC and that means 1 1500 rc0 cool so I'm going to install that as a fresh new application to do that I'm going to use pmpm DLX I'm going to use create next app and instead of latest I'm going to use what we just saw RC and I'm going to call this next 15 rc0 and of course all the code at the end of this video is going to be uploaded to GitHub you can check that out in the link right down below a lot of these questions are straight out of 14 I'm going to take yes typescript yes lint Tailwind Source directory and the app rouer this is the new one turbo pack so let's go for it let's uh bring in Turbo pack this is new with the 15 release candidate apparently now turbo pack has 100% unit test coverage which means they think it's ready for prime time so it's try it out ourselves no the import Alias customization I'll bring that up in vs code now that we got that going in vs code let's bring up the terminal and then just launch it all right that's started let's go take a look over our Local Host all right it seems that turbo pack is working that's awesome let's check that off our list of things that we looked at we also see the new landing page which is also on their list of things that we should take a look at so let's check that one off that's down here in the create next app updates we get a new design I'm I'm personally very appreciative of that because as I've been building out my nextjs course PR nextjs dodev I've been launching this create next app continuously for months now and I'm really happy that this boiler plate is a lot smaller all right back up the top of the release notes the first thing they mentioned is that they now are on the react 19 release candidate let's go take a look at a few of those features what that means is that you can bring in some of the new hooks for example example use action State that's a new one on 19 there are a couple others so we now have access to all those one of the really cool upgrades that I like to react 19 is the fact that you can put tags that are destined for the header in subcomponents let me demonstrate that for you so I go over here to the app and I create a new subcomponent and I'll just create a simple subcomponent so this will be like a product component now let's bring that into our page get rid of all this boiler plate there we go then we got my product now let's go over into our subcomponent again and I'll add a meta tag but I'll do it from this subcomponent so I add a new meta component with the name of author and the content of Jack let's get save and now if I go to my view page Source we can now see that react 19 has grabbed that meta tag and actually inser inserted it into the head for us this is really a fantastic DX upgrade for react 19 let me explain why so let's say you're accessing product data here in your page or in your subcomponent and it has data that is destined for SEO tags well before you'd have to Tunnel that all the way up to the layout essentially or have a metadata function that would go get that data for you and so you'd have two different places where you'd be accessing that data but now because you can just go and put things like meta tags right into your subcomponents you can just create the meta information right there and it gets put in the right place inside the head awesome all right let's go take a look at the next feature of next1 15 that's the react compiler react compiler was introduced at react com 2024 and it is now an experimental feature inside of nextjs of course you can use the react compiler in any framework and it's important to know that is not connected in any way to react 19 you can use it on react 18 if you so choose but here they've just made it a lot easier to use it let's try it out so to try it out I think we should go first and create a component that is optimizable see it unoptimized and then use the compiler to optimize it so we'll create a new optimizable counter it's a counter so it's going to use state which means it need to a client component all right so I've created a div with a button where you can increment it so I'm going to create a header sub component here and use that as well I'll give myself a little bit of margin and then I'll use that in my component all right let's bring the optimizable counter into our page so now to test rendering I'm going to bring up in the dev inspector the react Dev tools for components and what this is going to do is every time I click on a react component it's going to show us what's actually rendering so in this case every time I click increment you can see the subcomponent header is updating but it really doesn't have to think about the code for a second we go back over here we can see that header doesn't depend on count so theoretically we could just cache or memoize header and then just reuse it every time so that's actually what the compiler is going to do let's try it out we'll go back over to our terminal go under our release notes we'll install the react compiler and then over in our next config we'll bring in the experimental react compiler now rerun it now over in the browser I'll click on increment and we can see our subcomponent header is no longer updating that's a sign that we are running on the compiler we can actually just toggle it by just going over here saying false now we can refresh maybe a few times and we'll hit increment again and you can see that we are unoptimized change it back to true and now we're optimized again so easy you can configure the compiler if you want but honestly I just stick with the defaults unless you really need something specific all right let's take a look at the next one and that's around hydration errors yes they're giving us better hydration errors let's go check it out we'll create a new component called bad hydrating component now because this deals with hydration and only client components are hydrated we need to make this a client component and then we need to give ourselves some data that is going to be different on the server than it is on the client so I'm just going to use the time in milliseconds because that's guaranteed to be different between the server and the client so let's create a new component here I'll call it bad component and I'll just get the milliseconds and display that and then we'll bring that into our page hit save and now run it so we got 515 as the second render on the client let's go take a look at our hydration error yes we can see that on the client we had 510 originally when we got 368 coming off the server so we got a hydration error there and a really much improved hydration warning all right let's get that out of there because that's no fun and let's take a look at the next one on the list and we get into the caching updates and this is really the big change when it comes to next js15 what they've done is they've taken in all of the caches that are in nextjs app rouer and instead of having them on by default they're now off by default which I think is a huge DX upgrade for folks because I think a lot of folks ran into issues early on because the nextjs app rater is so aggressively cached and now you can get that caching if you need that performance but you need to opt into it let's go take a look at a few examples I'm actually going to do the fetch one second where we're going to start with is the get route handlers are no longer cached by default so we'll go back here we'll create a new app route time and I'm going to create a get route here that Returns the time all right we've got our API time that has a get method that Returns the time let's go check that out and now if I hit refresh we can see that the time is changing on every refresh very cool now let's go try that out in build mode because that's where people got stung there was a difference between Dev mode and build mode and so folks would think that their application was working in Dev mode and then they build it and they deploy it and it wasn't working ah so let's go see now if there's symmetric behavior in build mode so first we're going to build and then we're going to start and yes this is no longer cast which is awesome so by default in nextjs 14 if you had a get route then unless you looked at the incoming requests like the headers or the cookies or you made a fetch inside there that didn't have any caching on it then the route was going to be static but in this case by default it's going to be dynamic we can actually see that in our terminal so if we look back over here at the build we can see the API time which is the route that we just created has a little F next to it so let's go take a look at down at the key key says that that means that it's Dynamic so that means it's going to be fetched every single time from the server as opposed to what it used to be which was static so as you can see what they're doing is is changing the default now if you wanted to make this static what you could do is you could go and Export a const that says Dynamic and then say for static now if I rerun the same test and I hit refresh then that number never changes because now it is a static route if I take a look at the build we can see the API time now has an O on it and that o if we look at the legend means that it is pre-rendered so if you want that cach you now have to opt into it all right let's take that out and try the changes to fetch so if we look back at our release notes we can see that fetch requests are no longer cashed by default so what does that mean so let's go take a look over here at our page and we'll actually do a fetch request in here to go get that time and then we'll get the time by awaiting that response and we'll just put that into a div now let me run this in Dev mode and we'll go back to our main route now we get the time and the time actually does change and this is different from before it would have been locked in before but again not in Dev mode so again one of those issues of Dev mode works one way and build mode would work a different way so let's try and build it and run it now this didn't work and why didn't it work well it had an issue all all the way back up here where the fetch failed and why did it fail because well we're not actually running when we're building and referring to ourselves so that's not going to work so what we actually need to do is we need to go build a little bit of a timer service that we can talk to kind of an external service that would be the right way anyway nextjs servers really shouldn't talk back to themselves like I'm doing here so let me go build another little timer project inside of our project it's an Express server and it will then go and give us our time in the same way we'll call this one time service we'll initialize the project we'll add Express and then in there I'll create a server.js file we'll bring in Express we'll respond to slash by giving you a time and then we'll listen on Port 880 and then we'll put in a console it says we're listening on that Port now let's go make another terminal and launch that all right looks good oops I used date string so that's not good let's do uh UTC string is that going of give us the whole thing we want something that actually changes every hit there we go yeah so that's going to give us one every second that's that's fine okay cool so now we've got a little service that we can talk to that's running let's go back over to our app page we'll hit 880 this time just need slash let's try in Dev mode all right good looks like it's getting it from the new service that's awesome and now let's actually build and run it and now theoretically this actually should work but it's not it's still cached so why is that well currently the route is marked as static so we need to do is force this route to be dynamic all right let's try that again all right we hit refresh and there we go now we're getting the updates now I got to say I shouldn't have had to go and set that Force Dynamic the reason is that nextjs during the build process it looks at the fetch to see is this a cached fetch or not and if it's not a cached fetch then it should set the route to be dynamic but it's not doing that so I think that's actually a bug but if I wanted this to be cached then I set the cash to force cash and now try that now let's take a look at the build the slash route is dynamic so we're going to get a new page on every request but we're not going to get new data because that fetch has been cached all right there's one more cach that they changed the defaults on and that is the client router cache the client router cache is for when you navigate between pages on the client they used to save the old page and then give it back to you and that tripped I think a few Folks up although I think in reality they were actually getting tripped up by the router cash but whatever if that cash tripped you up then you'd be happy to know that is now off by default but you can set it back on if it didn't trip you up and you wanted that performance benefit by going and setting the experimental flag as they say here now they're pushing on with their partial pre-rendering feature that is an awesome feature of next xjs gives you the ability to actually pre-render the app shell and then send that out to the client super quickly out of an edge function what this is allowing you to do is create incremental adoption of partial pre-rendering you can select per route which routes you want to be partially pre-rendered which is really awesome so very happy to see that here next up we get this new feature called next after it allows you to add a function that's run after the route runs not sure why I need this but let's give it a try anyways maybe you have an idea and you can put that in the comment section right down below so we'll set on the experimental after we'll run in Dev mode and now I can bring in unstable after as after and then anywhere in my component I just say after and then give it a call back function and I can say that I finished rendering so now if I go back over to my app hit refresh and now we can see that we get my finished rendering console log so that's really cool I guess what I could do is maybe set a time up here and then give the Delta time down there to tell me how long it took to render my page who knows all right next up we've got our create next app updates I mentioned those in the beginning and then for all you build optimization folks there are some optimizations when it comes to bundling in external packages it gives you finer grain control about what you transpile and what you just bring in as external all right that's what's coming out in nextjs 15 at least according to the first release candidate if you want to keep up on all things nextjs be sure to jump on to pron nextjs dodev sign up for my newsletter that'll give you access to two free tutorials one on State Management the other on forms management and you'll know when the course comes out we are just in the final phases of it right now doing the final edits I'm so happy and I can't wait to get that out to you in the meantime of course if you like this video hit the like button if you really like the video hit the Subscribe button and click on that Bell and be notified the next time a new blue collar coder comes out

Channel: Jack Herrington

Views: 24,783

Keywords: shadcn, next js, nextjs 15, vercel, nextjs 14, react 19, npm nextjs, next 15, vercel ship, react compiler, turbopack, nextjs turbopack, react, react native, react js, react app, react js compiler, React compiler, jack herrington, jack harrington, react 19 compiler, react forget compiler, ngrok, nextjs app, nextjs server, nextjs api, nextjs router

Id: N2LzvfM2R5M

Length: 17min 13sec (1033 seconds)

Published: Fri May 24 2024