Next.js 14 - All you need to know

so it's that time of the year again when a new nexs version is released so today the nexs 14 was released let's go through the release notes and see what's new in it so here I have the release blog post open and I will leave a link to this in the description so let's Dive Right In so first of all they made some improvements to the local development performance with the pages and app router it looks like there is now 5,000 integration tests for next Dev that are passing with turbo pack and that totals about 90% of all of the tests so this gives faster and more reliable performance when using the NEX Dev D- turbo and once there is 100% of the tests passing they will move turbo back stable in the upcoming releases but also continue to support web pack for configurations and ecosystem plugins and if you want to follow the progress of that you can check this website over here for more information then next about forms and mutations so first they have this example over here about how nexs 9 introduced the API routes and how you would communicate with the back end with API routes and if we scroll down a little bit we can see that related to this the server acction are now stable which is pretty cool so the server actions were introduced in an earlier version of next s and they have been in Alpha ever since but now they are stable so what server actions enable us to do is actually use backend features without making any API routes or route handlers for each endpoint that we need but we can rather just Define the server code inside of our component with the use server directive and in this example the server action is used with the form action attribute but but this is not a requirement and you can also call the server action as a functions too and if you using this with typescript you get the full endtoend type safety between the client and the server which is something that I personally am pretty excited about and looking forward to test more okay let's scroll down a little bit more and right here we can also see that the server action are deeply integrated into the app router mode and you can do stuff like revalidate path or tag with them or redirect use cookies and then also these three I would say kind of new hooks I think these were also in alpha or beta previously but you can get the optimistic update hook or use the use form state or use form status hook to display loaning States or cash errors or just display optimistic updates in your UI so those are pretty interesting and I'm planning on trying them out a bit more now and maybe make a video about those in the future the next thing that was announced was partial pre-rendering and this is in preview at the moment and the motivation behind this is that there is currently too many runtimes configuration options and rendering methods to consider and I agree with this so This partial pre-rendering doesn't require us to learn any new apis which is good and it is built on react suspense so how this partial pre-rendering works is that it basically generates a static shell based on our suspend boundaries and pre- renders the fallback from our react suspense boundaries and then the suspend fallbacks are replaced with Dynamic components once the data for those is ready so when a request is made this is basically the static HTML cell that is immediately served and then the data and content for these components that were wrapped inside of suspend boundaries is dynamically replaced when the content for those Dynamic components is ready so this sounds very interesting and I think the cool part also is that it doesn't require us to learn any new apis so I'm really looking forward to testing this out and seeing how it developed so it's still in preview so that's something to keep in mind next up we had metadata improvements so with nexs 14 The Blocking and non-blocking metadata are decoupled and this ensures that non-blocking metadata will not prevent The partially pre-rendered page from serving the static cell immediately so here we have some deprecated options so the viewport color seam and theme color are now deprecated and two new options are added that replace the deprecated ones so the viewport and generate viewport and these are something we can start adopting right away as stated in here next up if we scroll down a little bit we have the next CHS learn course so this is a brand new free course on nexts learn and it can be accessed from here so if we open it up it's next ts.org learn and looking at these topics over here it looks really comprehensive and it has has a lot of stuff on things that you would need if you want to build a fully functioning nexs application and deploy it to production I haven't obviously studied any of those chapters yet I just skimmed through it but it looked very good and if you're new to nexts or even if you know your way around next TS well I think this course will have something for you too or at least you should check it out and see what you think of it uh I know I will definitely be checking out a couple of those chap CHS in the course so that's pretty much what we have there are still some other changes but we won't go into those right now so what do I think about this new release well one thing I love about nexs is the developer experience and the amount of effort they put into educating us developers and that is of course super good if you want people using your framework but other than that there were no new apis or uh big major features in this release probably the biggest in my opinion is that the server actions are now stable which was kind of expected since they had been in alpha or beta I don't I'm not sure but either way they had been uh in alpha or beta uh for a while now so that was kind of expected but I don't actually personally mind that there wasn't any major things right now I think we have had quite a lot of those in the previous releases so this was kind of good and I think uh it's nice to see versal putting effort in the documentation and educating the developers also and making the current features stable but yeah I'm looking forward to trying out the server actions more now that they are stable and also checking out the next A's learn course and if you haven't already please hit the Subscribe button below because I will be making more next day's videos and tutorials in the future and if you're new here check out my previous videos there is bunch of good nexts content over there but yeah I know this was just a short video summarizing the new features of nex4 but I felt that I wanted to make this video and talk through these updates with you guys but that's it for now I'll see you in the next video

Channel: Tuomo Kankaanpää

Views: 28,646

Keywords: next js, nextjs, next.js, next.js 14, next.js 13, next js 14, next js 13, suspense boundaries, server actions, partial prerendering, ssg, ssr, prerendering, vercel, nextjs conference, next.js tutorial, next js tutorial, tuomo kankaanpaa, theo gg, theo gg nextjs, nextjs conf, james q quick, web dev simplified, josh tried coding, josh tried coding nextjs, lee robinson, nextjs 13, next js crash course, server actions next js, next js server actions, nextjs tutorial

Id: 1422BABWSkA

Length: 7min 49sec (469 seconds)

Published: Thu Oct 26 2023