Next js announced version 12. Next.js gives you the best developer experience
The React Framework for Production. To be very honest it's mind-blowing considering it's just a free javascript framework and they're setting the bar really high for what a full stack javascript framework is expected to do.
Next js now comes with a rust compiler instead of javascript to give you 5x faster builds. next makes it faster under the hood by replacing babel, because big complex apps tend to have slow build times.
Middleware next js
Middleware is not a new concept frameworks like express.js use middleware to intercept an http request and process it before it goes to actual route handler. next.js is little more complicated, where website to be really fast and the best way is to cache pre-built html pages on a cdn but the pages cannot be dynamic. Server side rendering that uses a node to fetch data from a database or api when the incoming request comes in and it's inefficient. Today developers wants have both speed and dynamic content at the same time and next is trying to make it happen through resell edge functions as these are serverless functions like aws lambda or google cloud functions. Next create a project file called underscore middleware in the pages directory from inside, you can also export a function called middleware and this function will give 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.
You can deploy the middleware in hosted on vercell edge functions instead of having one centralized node server, your backend code is deployed to the edge where it close to the user and therefore makes it faster.
support for react concurrent mode like suspense, suspense it's basically a component that allows you to wait for asynchronous data before rendering. Experimental concurrent features working with server side rendering it also supports react to dynamically import yes modules which can reduce the size of your client-side javascript bundle.
react server components
server components allow you to natively render html from a react component on the server and it uses http streaming to progressively render a web page on the server which 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. Using 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.
You can now import regular client components and it will rendered universally both on the server and the client, this combination of server components and middleware is a great way to build an app.