Next.js was established by Vercel in 2016 as a framework focused on rendering, with server-side features. Since then, it managed to evolve quite a bit, and now it has all the tools you need to create some of the best React apps out there. It also comes with a vast range of features, such as internationalization, page-based routine, analytics, static file serving, environment variables, hybrid pages, very good documentation, and many others.
Many consider Next.js to be the React framework that’s focused on production. Over the years it managed to fulfill this idea with some great results. Plus, Next.js 12 is offering some interesting features that were very much needed, and now they are indeed quite interesting, to say the least. Here are the best features to take into consideration with this new release.
A much faster build
One of the things to keep in mind about Next.js 12 is the fact that this version has the Rust compiler. It does native compilation, which means that there are 5x faster builds, a 3x faster refresh, and that alone can be downright incredible. The idea here is that this compiler is created on top of SWC and it consumes JavaScript, Typescript, and it also provides JavaScript code.
It comes as a Babel replacement, which makes it around 20 times faster on a single thread and even 70 times faster if it’s on a 4-core benchmark. Since the Rust compiler is working as a default, you do get quicker compilation builds, and that can help a lot. This works great when it comes to minifying files too, you just need to enable that in the config.
Collaborative live-coding
This feature is great because it makes it easier for teams to collaborate and work properly. It’s possible to draw, share, edit and code in the browser. Vercel.com/live is giving you all the things that you need. You deploy the app, give the URL in just a few seconds, and here you have in-browser editing, you can invite any members you want, and all you need is your browser. Play around with the apps and not commit to the repo. Once you do, you can push changes via the Git vendor.
React 18 support on the server-side
Next.js 12 is already integrating support for many of the React 18 version features, even if that version is yet to come. A great thing about it is that you get the built-in support for the Suspense on the server-side and also the HTML part streaming for the React app. You don’t have to load anything, instead, you can ship the HTML progressively to the browser.
Additionally, you have the React server-side components, which brings simpler logic and SSR development. Everything is rendered on the server-side, which is a great deal. There are some incredible improvements, but also limitations like the fact these are stateless, you can’t use the lifecycle methods, nor can you make usage of the browser only APIs.
URL imports
Next.js wanted to offer ES module support for quite some time. Next.js 12 offers native support, even if it was experimental in the previous version. You can build URL imports on top of all of that. This is great because you can import tooling from the CDN, there’s no install or extra builds required. You are able to import these without being forced to build these in a local manner, which is great. With Next dev, it will ament the download and then include the file in the next.lock file. Next build will start looking up the next.lock file.
Middleware
The middleware feature has to be one of the best additions for Next.js 12. Right now, we are forced to choose between server-side rendering or CDN when we want to build quick apps. The Edge functions are making things better and a lot quicker. Being able to run the dynamic functions before the CDN requests are completed does help a lot. The Amazon and Cloudflare infrastructure has integrated such a feature a little while ago. It’s named Lambda @Edge or edge computing. It has great integration with the framework.
There are many different reasons why you want to use the middleware. You have things like user authentication, logging, advanced 18n routing, rewrites and redirects, bot protection, handling the unsupported browser, and so on.
Conclusion
Next.js 12 is a great improvement of this framework, which has always been about development friendliness and the best performance. We are a team of developers that has always been focused on value, professionalism, and quality. Our commitment is to bring in the best possible results, and we use a variety of tools like the Next.js 12 framework to create state-of-the-art software. If you want outstanding results with your projects, all you have to do is to give us a try, don’t hesitate and contact us, our team is always here to help you bring even the most complex software solutions to life in no time!