Next.js 14 is Here! - Everything you need to know about the new version

ladies and gentlemen welcome back to another video the annual nextjs conference just started a few hours ago and versel CEO just announced the release of nextjs 14 they claim that this is their most Focus release so far and let me tell you I'm excited exactly one year ago they announced nextjs 13 and it brought some pretty big changes so I'm sure that the new version will also not disappoint us right off the bat you can see that they have been working on the turbo pack compiler a lot focusing on performance if you watched my previous video about the nextjs 13.5 release you know that that release was also focused on improving performance nextjs 14 still uses web pack by default however it's much faster now than it used to be one year ago so what they've been working on is adapting existing and new nextjs features to work properly with turbo pack and currently over 5,000 integration ation tests are passing which is over 91% this means that we will see turbo become the default potentially in the next few minor releases you can still switch to Turbo pack manually if you want at your own risk they claimed to have tested it on velcom which is a pretty large website and so a 53% faster local server startup and almost a 95% faster HMR or fast refresh it's important that they test it on a real project and not just on an empty project where this doesn't matter as much however you can see some improvements even in a fresh project by using turbo pack let's give it a shot if I start an xjs 14 project in development mode with VB pack you can see that it takes about 3 seconds to get going let's open the package.json file and add-- turbo after next Dev to enable turbo pack manually if I start the project now you can see that it starts in about 700 milliseconds which is a fraction of the web Pack's time as I said it might not seem like a big deal here but trust me in big projects this is going to be very noticeable the next point that I want to talk about our server actions this is a feature that finally stable in this release as an effort to improve the developer experience the team behind xjs wanted to provide an alternative to manually creating API routes in xjs this allows you to create a function directly in a component that's going to run on the server it can be used for caching revalidating redirecting and more in a single network round trip personally I'm still a little bit skeptical about server actions so I still need to test them out properly the next Improvement is called partial pre-rendering keep in mind this is still in preview mode but it's being worked on actively partial pre- rering is something that they have researched for a long time and at its core is a compiler optimization built on top of react suspense where this suspense fallback will be pre-rendered this is going to make the initial static response much faster which leads to all sorts of benefits from ux to SEO improvements from the conference keynote they made it pretty obvious that they were listening to developer feedback and acknowledge that while some nextjs features are indeed powerful they also tend to be complicated at the same time there are currently too many run times configuration options and rendering methods to consider and they want to keep providing amazing performance and personalization options but not at the cost of increased complexity making it clear that developer experience was a very important point in this release that's why the new partial pre-rendering feature doesn't require developers to learn any new apis they are also making some simplifications to how caching works because this was also an area that had a lot of complexity before additionally we have some metadata improvements that play along with the partial pre-rendering feature basically they had to make most of the metadata non-blocking so it doesn't prevent the initial static response from being pre-rendered last but not least they've made a completely new nextjs torent course which is free and will teach you all of the existing and new nextjs featur features on practical examples I think it's great to see that they are putting so much effort into helping new developers understand the framework finally we have some breaking changes and applications that you might want to look into if you are upgrading an existing project I think the most important thing to mention here is that the minimum required node version was bumped up to 18.7 so if you are running into weird errors like this when you try to start an X js14 Project you will need to update your node version I'd love to hear your thoughts about this new release let me know what you think in the comments below

Channel: Armin Sarajlic

Views: 5,422

Keywords:

Id: LNk5lEOTspY

Length: 5min 8sec (308 seconds)

Published: Thu Oct 26 2023