Next.js 12 is a Beast

just yesterday next js announced version 12 and it was even more impressive than apple's new macbook announcements which is pretty mind-blowing considering it's just a free javascript framework they're setting the bar really high for what a full stack javascript framework is expected to do like it now ships with a rust compiler instead of javascript to give you 5x faster builds you don't need to know rest it just makes next faster under the hood by replacing babel which is important because big complex apps tend to have slow build times and i've already updated my full next.js course to use version 12. and i'm seeing significantly faster refresh and build times that's pretty amazing but it's not even close to being the coolest feature in this release let's take a look at all the new features in x12 and more importantly why you would want to use them if you're new here like and subscribe and if you want to get really good at next consider enrolling in my full course grab a discount in the description the first feature i want to look at is middleware middleware is not a new concept frameworks like express.js use middleware to intercept an http request and process it in some way before it goes to your actual route handler with something like next.js though things are a little more complicated on one hand you want your website to be really fast and the best way to make that happen is to cache pre-built html pages on a cdn but when you do that you lose the ability to make your pages dynamic so on the other end of the spectrum you have server side rendering that uses a node server to fetch data from a database or api when the incoming request comes in but that is slow and inefficient in a perfect world though developers would have both speed and dynamic content at the same time and next is really leading the way to make that happen resell the company behind next has a product called edge functions these are serverless functions like aws lambda or google cloud functions except they're deployed to the edge like a cdn so your end users get extremely fast execution with no cold starts now here's where middleware comes in in your project create a file called underscore middleware in the pages directory from inside it you can export a function called middleware this function will give you access to the incoming request and allow you to modify it and it will run before rendering takes place for every page in the pages directory you can also scope the middleware to subdirectories if you only want it to run on a subset of pages what's awesome about middleware is that it makes your code way more efficient for example i may need to verify a user authentication credential on every page if the user is logged in we might want to retrieve some data from a database otherwise redirect to the login page instead of importing that logic into every page i can now just define it in the middleware and it will run on every page automatically but as an added bonus when you go to deploy the middleware is hosted on vercell edge functions instead of having one centralized node server your backend code is deployed to the edge where it's very close to the end user and therefore much faster that's great for burcell but if you're worried about vendor lock-in it provides a standard build output that you can deploy to any platform it's just going to take a lot more work to configure now let's move on to the next big feature in x12 support for react concurrent mode like suspense if you're not familiar with suspense it's basically a component that allows you to wait for asynchronous data before rendering its children as of today it's still experimental in react but it's still used in production on some websites like facebook however if you try to use it in next it results in errors because it doesn't play well on the server in next 12 you can opt into experimental concurrent features to get these features working with server side rendering it also supports react lazy to dynamically import yes modules which can reduce the size of your client-side javascript bundle now this next feature might be the one that i'm most excited about react server components server components allow you to natively render html from a react component on the server what's crazy about it though is that it uses http streaming to progressively render a web page on the server that means if you need data for one component and then another component after that you don't have to wait for one after the other it'll render the first one then the next one then the next one after that which really opens up a whole new world of possibilities when it comes to designing full stack web applications with server components you can stream html from an edge function immediately and progressively show updates as your data comes in and next you can change a page or file name to dot server.js to tell the framework that it's a server component when this component is rendered it requires zero client-side javascript that means fewer kilobytes for the end user to download in addition you can fetch data directly inside the component without having to use functions like git static props or get server-side props it's a really ergonomic way to build an application you use react patterns from start to finish or server to client now you'll likely want some interactive javascript for the client so you can also import regular client components as well and they'll be rendered universally both on the server and the client the combination of server components and middleware looks like a really awesome way to build an app i'm actually considering redesigning the entire fireship site with these latest features if you guys want to see that as a series here on youtube make sure to let me know in the comments to wrap things up there's one more cool feature you'll want to know about you can now import modules using urls instead of npm this works for javascript modules that you would import from a cdn but you can also use remote urls in your css or to import images directly into your javascript code overall next.js version 12 is a total beast make sure you're subscribed for more updates and if you're a pro member stay tuned for more updates to the full course thanks for watching and i will see you in the next one

Channel: Fireship

Views: 392,096

Keywords: webdev, app development, lesson, tutorial

Id: lRQ5z7i7pxE

Length: 5min 7sec (307 seconds)

Published: Wed Oct 27 2021