NextJS 15 just got rolled out for Production 🤔

Summary

Highlights

• Next.js 15 is out and it’s creating quite the buzz in the tech community! 🚀
• If you're using Vercel for deployment, you're likely in the clear, but other deployment methods might require some attention. 🔧
• The new release boasts enhanced support for React 19, although it was initially unexpected for many developers. 😲
• Self-hosting improvements are a blessing; less pain in managing cache and middleware! 🙏
• Exciting updates like improved form handling and server action security are garnering positive attention. 🌟

Key Takeaways

• Next.js 15 has rolled out to production, raising alarms, especially for those not using Vercel. 🌊
• Hitesh is excited yet intimidated by this update, particularly concerning caching and middleware. 🎢
• The update includes significant changes in hosting, React 19 compatibility, and new features for better development and deployment. 🛠️

Overview

NextJS 15 just got rolled out for Production 🤔 Transcription

• 00:00 - 00:30 today is a traveling day but before traveling I thought let's make this quick video about nexj S15 because the moment the news dropped I am in a little bit of a panic mode the moment next year's new version roll out it's a good way and it's a good time to show a little bit panic because a lot of things changes in the nextjs and we're going to discuss a whole lot about it by the way I'm traveling to Mumbai for uh a really nice event by Nvidia Jensen is coming in for there uh the CEO of Nvidia I got invited to the event it's a really
• 00:30 - 01:00 fantastic event and um I didn't open it up that hey I'm traveling there because a lot of people uh say that hey you should not really release the information out I got instructed for that but uh finally the video is out by the time you'll be watching this video I'll be already in Mumbai so it's okay uh anyways it's really fun I'll be posting and sharing the information about uh all this events and how the fireside chat with the CEO of Nvidia went up on my Twitter account so go ahead follow up anyways coming back onto
• 01:00 - 01:30 the point the new version of nextjs is out and it's a point where if you have anything in production with nextjs and if it is not on war sale then you need to be panicked uh not much but a little bit you need to worry about that let me walk you through that how it actually goes and how it works and why I'm making this video by the way I'll definitely walk you through with all this we're going to together read all of this next year 15 is out and the whole point is
• 01:30 - 02:00 this line nexs 15 is officially stable and ready for production we are going to take this down in a minute uh but first of all let's go ahead and talk about what's happening how is it happening so nextjs 15 is out and there are two ways of handling the nextjs the one version is worell so if you have taken the path where everything is going down the lane of worell then okay no worries at all but the chances are high that a lot of people who use nextjs actually use some kind of VPS or maybe an ec2 or maybe
• 02:00 - 02:30 some another service to deploy their application if you're choosing this route then okay no problem versel is really really nicely built as an Hardware so that it is closely uh binded with the nexs any version of nexs they support everything out of the box but chances are that if you are going with this route of uh VPS or an ec2 you have deployed the nextjs on your own then obviously you have two things to worry about the first one you have already handled is the middleware running middleware out of the versell is no joke
• 02:30 - 03:00 the serverless environment doesn't really support out of the box the VPS or the ec2 or you have deployed anything on the digital ocean up it's not going to work so chances are high that you have already customized and have taken care of the middleware itself another thing that you have to worry about is uh the cash that is a really really big issue and turns out the more you work in the industry you realize that when people say that the two difficult problem of computer programming are naming the variables and uh the caching related
• 03:00 - 03:30 issue validating it invalidating it all those things so yes this is really a big issue we recently faced this issue we recently rolled out a product uh coding hero uh so if you go to Chai cod.com uh this is the whole platform that we built uh so that people can apply for to become the coding hero they can win the cash price of 5,000 rupees and already we are hosting 60 live classes so you can just check out the events and we're working on it we are building it up if you wish you can also apply on that so notice here so many live classes are
• 03:30 - 04:00 happening and whoever gets the highest voted every month uh I'm uh donating a small scholarship of 5,000 rupes and I'm planning to make it more so we built initially this whole thing on the next shs itself and then we quickly realized that it might shoot up the bill and we are not ready for that kind of a traffic on the worel uh because of pricing worel is a great platform it works really nicely but we were worried about the pricing so we actually took the another route of going on this side VPS and ec2 which took uh the digital ocean route
• 04:00 - 04:30 again lenoe digital ocean whichever works for you so if you're on this route and you are still on the nextjs this is the point where you need to be worried uh why my initial thought that the next shs 15 when it's going to become uh it's going to be probably powered by react uh 16 not 16 react 19 my bad react 19 and I don't know how I came to the conclusion that whole next year's thing is going to be on the react 19 and we're going to be
• 04:30 - 05:00 going this path but somehow react 19 is still in the RC and if you just look at the docs it is still in the V8 it's very cooked up react 19 is very cooked up but surprising to my belief again I didn't got any confirmation from anywhere but it was my belief that react 19 is going to be something which is going to be powered uh powering up the next GS5 but before even rolling out that uh next year again this was all my belief and my thought it was never confirmed officially but hey why are we having
• 05:00 - 05:30 this so again if this is the case yes we need to together look at the docs and we need to see and figure out by the way the whole thing the chai cod.com the coding hero project we actually migrated it to Classic react instead of the next and we found it's really great and it's performing really nicely we have to do a couple of more things on that it's project we are still figuring out the features then we'll figure out the uh the performance part of it but it's good it's good it's handling pretty nice we have already 10,000 registered user onto
• 05:30 - 06:00 that we have 60 classes we have over uh 55 coding Heroes and some applications are still ping so a lot of work is already going on now coming back on to reading uh this part so together we're going to be reading this up because I am excited I'm scared what's going to happen one of our another product learnist uses nexs quite a lot and we have now we cannot call it as nexs because we have modified the framework so much uh with the middle wees and so many things that we we run it on AWS so
• 06:00 - 06:30 now it's almost like our own framework it's not really an accurate term but we have modified it quite a bit for our use cases so our whole team is definitely going to watch this video and going to feel a little bit panicked that oh oh my God the next gs15 version is here so let's see and uh if you're watching this from our team just let me know in the comment section that how is it going on for you all right moving on uh next year's 15 is officially stable and ready for production oh for us for non veral user uh or you should write it in the
• 06:30 - 07:00 parenthesis uh for all the verel users versel actually gives you all the bells and whistles and it's too good of a platform the only thing that doesn't work is pricing and they have to get really on the expensive side because they do so much of the amazing work this release build is on the update from both rc1 and rc2 we have focused heavily on stability that's good to hear while adding some of the ex exciting updates uh we think you'll love try xgs 15 today all right that's good so uh we can
• 07:00 - 07:30 actually upgrade to code mode Canary uh just like this or you can install the npm next latest then react RC and the react Dom RC so turns out yes it is based on the react latest version that's why we are seeing the RC version being updated but to my surprise that I can have something in the RC as an upgrade like this and you're saying that this is ready for the production little hard to digest but I'll take you on the word we have also exciting uh uh we are also
• 07:30 - 08:00 excited to share more about what's coming up at next sh's conference Absolutely I'll be watching that uh this Thursday on October 24th that's almost 2 days after this video here are the 15 uh new next year 15 so first of all uh it's a CLI easily upgrade to the next J Ah that's good as sync request API oh man I what I really don't like to see in these releases is the very second update is breaking the third update is breaking so the way how you were writing the code it's going to break a lot of existing
• 08:00 - 08:30 things and you have to relearn a lot of new things which is already painful but at least let's have a look as sync request apis incremental step towards simplifying rendering and caching model oh my goodness I would love to know more about it caching cement cashing man God again told you middle Weare and the cash so these are the two things I really don't like when they have the breaking changes so caching semantics breaking fetch request get route handlers and the
• 08:30 - 09:00 client navigation are no longer cashed by default when it is cashed by default and when it is not cashed by default this is so much of a jigsaw puzzle these days I am losing the count of it which one of these things are going to be cashed where I have to pass the argument that it's not cashed by default oh goodness I have to keep a track of it I need to build a chart of that okay this is cach this is not cached all right react 19 support okay so whatever I was assuming and the whole industry was
• 09:00 - 09:30 assuming this is actually correct support for react 19 react compiler this is experimental hydration error Improvement all good for that uh turbo pack uh Dev performance and stability so turbo pack is actually nice I should make a really dedicated video on this one uh this whole thing deserves a talk on this one but I I think that's going to not a tutorial kind of a thing that's more of a discussion and a Blog reading kind of a thing a static indicator new visual indicator showing static routes during development I think personally what I
• 09:30 - 10:00 think is there needs to be a lot of improvement in the development side of the next sh because when you're are developing the things it still is very slow to develop the app and see the preview builds in the next sh it works really nice when you wants to deploy it and a lot of caching comes into the picture lots of CDN comes into the picture uh but what I think is it's not that of a beautiful experience while developing the things what we get in the next in the in the reactjs uh but again what can we say uh unstable
• 10:00 - 10:30 after API experiment execute code after a response finish streaming oh that's nice I think this is a very much AI Centric thing because what happens is when you build any of the AI based application and especially if you have uh seen uh the versel SDK of the AI you have noticed that a lot of things actually work when you send a response send a request and a response comes up it is a streaming of the data you see those chat GPT the line by line things that goes on that is a streaming
• 10:30 - 11:00 response and I'm able to execute some piece of code as the streaming uh executes and the finishes up I think this is really nice and a welcoming change I would love to see that and probably go for more of the use cases on that instrumentation JS API stable new API for Server life cycle observability I think this is also a new uh welcoming change in here I would be super happy with that see uh a lot of things uh I don't know where the nextjs is moving
• 11:00 - 11:30 towards on the backend side or the front end side but in the front end side we have in the ne in the react we have a lot of these observability life cycle methods if you remember if you have been coding enough long in the react ecosystem you know that we used to have these all uh observability States uh component did Mount component unmount and all these things if you're coming from the app side yeah these are the things there but now we have just one hook use effect and pass on the array with that now similar kind of thing can be done in the in the server side as
• 11:30 - 12:00 well I need to look more into this one very exciting update about this one enhanced HTML form with the client side navigation oh they made a big fuz about it on the Twitter as well that now there's a next form that hey we can just build the forms out of it pretty good pretty good actually uh typescript support wasn't it already there or did I miss something uh self hosting improv oh goodness oh goodness uh more control over the cash control headers
• 12:00 - 12:30 give me all the control that's what I'm saying instead of me going into the framework and doing the tweaks give me all of this I think if nextjs does this a lot of people slightly hate nextjs because of this and only this self-hosting next shs is a pain anybody who has worked in the production can tell you this that hosting next shs on your own it's a pain it's a real pain and if you give me more control of the cash as well as the middleware when I want the middleware to execute on the on
• 12:30 - 13:00 the fly on the edge itself or I want to execute it on the server itself I think there's nobody to beat next if that control comes in right now the control uh the cache is almost nothing and even on the middleware you have zero control on that so I think if you give me those two things I would be flag bearer of the next JS currently I'm not that much I I love it I love it but not uh server Action Security unguessable endpoints and removal of unused action what do you mean by ESS end
• 13:00 - 13:30 points is it something like that H I need to look on this so when you pass on the server actions your farm gets into the DAT I need to look into this I have no idea what this unguessable endpoint means I need more research on that uh bundling external package all right uh es L support development and build performance all right regular stuff but it it takes a lot of effort but I'm going to say regular effort all right so we have this async uh request API this is a breaking change
• 13:30 - 14:00 in the traditional server side rendering the server waits for a request before rendering any content all right that happens however not all components depends on request specific data H interesting so it's unnecessary to wait for the request to render them ideally the server would prepare as much as possible before the request arrives this enables to enable this and set the stage for the future optimization we need to know when to wait for the request therefore we are transitioning apis that relies on on the request specific data
• 14:00 - 14:30 such as headers cookie prams and search prams to be a sync H that's nice so if we are bringing up the cookies from headers the cookie store that awaits all right need to look more onto this one need to do a build a demo app for this one but this I think this is a good approach but breaking change I don't like it moving on the instrumentation uh the instrumentation file with the register API allow user to tap into with an xjs server life cycle
• 14:30 - 15:00 to monitor performance track the source error and deeply integrate with observability like the open Telemetry oh nice they have integrated Sentry as well pretty nice pretty nice we collaborated with Sentry to design onrequest error Sentry is a good product actually so I need to look on this one but this is this is a good one I would look more onto this one and probably do a a whole dedicated video on instrumentation JS this is a pretty good one this is something that they actually posted about on the Twitter from the
• 15:00 - 15:30 founders and CEO as well the new form component extends the HTML form element uh with prefetching client side navigation and Progressive enhancement so now we can just have a really classic form imagine we have this much next form and it does everything for us and gets the data on this is nice actually I would say this is a welcome change this will help me to build and ship tutorial faster especially the signup signin page this can be done faster now and finally we have Improvement for cell phost oh this is my favorite this is my favorite
• 15:30 - 16:00 I'm going to read this when the self hosting when self hosting application you may need to you may need more control over cache control I need more control over the middleware as well but okay one common case is controlling the stale uh while revalidate okay one common case is controlling the stale while revalidate period sent for ISR Pages uh we have implemented two Improvement okay by the way in case you don't know about the ISR or NSR and all of that I have a dedicated video on all
• 16:00 - 16:30 these acronyms on the channel go ahead check this out I took my iPad and pen and literally explained what all these acronyms are uh you can configure the expired time value in next config okay so config level changes I like that uh this was previously experimental s SWR Delta I have zero idea this was there I'll be honest I have zero idea it was already there probably my team knew it but I I was unaware of it anyways updating the default value to one year ensure that the most CDN can fully apply
• 16:30 - 17:00 the stale while revalidating data oh this is something that we recently faced and encountered that so this value of one year on the CDN this was a pain so when we were building this chai code coding hero what happened is when we migrated from next shs to the classic react some of the request were actually coming from the CDN so we had the same signup page and the login page we moved it and our brouts were same so sometimes we were receiving the request from the
• 17:00 - 17:30 CDN we didn't want it that and we had no way to actually just crush it off that we don't want it eventually we had to change the route as well to not get that and that's why you see that uh chai code.com it was all coding Hero at that point but then we realized it's it's too much of a pain to work with that we of course that's not a best way but we came up with a quick hack let's change the url to/ CH and it's going to just remove this because validating everything for one year it's it's not an easy way uh so
• 17:30 - 18:00 again ensuring most CDN can fully apply the stale while revalidate I want the validation but inv validation I need more control on that and it's a classic computer science problem but this is good we also no longer override the cash control value with our default values allowing full control and ensuring compatibility with any CDN setup oh good man any are we sure on that any finally we have improved image optimization when self hosting okay previously we recommended to install the sharp for optimizing
• 18:00 - 18:30 images on next sh server sometimes we don't need sharp actually sometimes we have outsourced this whole image optimization things to uh a lot of things including uh a lot of cloud-based Services which are available for images Cloud ner and whatnot this recommendation was something missed uh with nexs 15 you no longer need to manually install sharp nexs will use sharp automatically all right are you shipping it next will use sharp automatically when using next start or running the Standalone output I need to check what
• 18:30 - 19:00 do you mean by will automatically I need to look onto this one but again this these are all the questions probably you might also be having uh I definitely need to work more onto this one but hey this was just a quick video to just discuss the things together about NEX S5 and a lot of things so I hope you are excited about this update you are scared of this one as well if you found something interesting or something new just let me know in the comment section I'll be reading them out if you have an ex app already in production let me know your
• 19:00 - 19:30 thoughts tweet about it and tag me up there I would love to know your thoughts what's going on with the next J and uh are you just ready to just they have said it it's ready for production so are you updating it today or not let me know in the comments