With all the hype around next.js 12, this article will help you get to speed about what the framework actually is and all the new features introduced in the latest version.
Next.js is a React Framework. If you have used React you know that you write in .js files and these files are sent to the client. With the introduction of Next.js it introduced server-side rendering into React, which renders the React document on the server itself in the HTML format and then sends the files to the client.
Although this is not the only thing which it does, there's a lot more to uncover!
1. Rust Compiler
This may not sound like a big deal but with the introduction of the Rust Compiler alone it gives you 5x faster build speeds as compared to Babel which is what React comes out of the box with. This is possible due to the usage of SWC, which is a typescript compiler written in Rust. The exciting thing is this is not even half of what Rust has introduced in its latest version.
2. Middleware
Middleware helps you to intercept a HTTP request and handle it or use some logic on it someway, before it goes to the actual Route Handler. Suppose, you want to check the user credentials before giving them access to the next page, middleware helps you with this and if the user credentials checks out then the user is taken to the next page and all of this is done within 1.5 seconds. Next.js uses their own creation to deploy middleware, ie. Edge Functions, this comes with a few restrictions like you cannot use TCP connections, Node.js file systems, can only be used when deploying to Vercel, etc. However, it also provides a standard build output which you can then use to deploy to any platform.
3. React Server Components
Server components allow the use of HTTP streaming of a react component in the form of HTML or any other format on the server itself. What this means is that if you need data from component-1 and some other data from component-2, you don't have to wait for the first component to load before using the second component, it will render the first one then the second one and so on.. Also server components do not use Javascript, which means fewer Kilobytes of data for the end user to download.
4. URL Imports
You can now import modules using their url instead of npm, this works for Javascript based modules which you would import from a CDN. You can also use this to import images directly into your Javascript code.
