NextJS 12 Game changer update !

Nextjs is an extremely powerful framework as it supports all 3 rendering engines, SSR, CSR and SSG which are usually only found in one framework. By itself, it is already strong, but on October 26, Next.js has updated to version 12, Next.js 12 is the biggest release ever. This can also be considered a big step for Nextjs to follow its ambition to make Nextjs not just a full-stack web framework but a genuine web SDK. So in this update, how they have made great improvements, let’s find out.

Main content

1. Improve build and refresh speed using Rust compiler.

In earlier versions Nextjs used Bable (a JavaScript compiler and toolchain primarily used to convert ECMAScript 2015+ code into a backwards compatible JavaScript version in current and legacy browsers or environments). more) and its disadvantage is making compile time longer, using more dependencies <dev dependencies 269 packages >, … this is one of the things that makes Nextjs compile time take up quite a lot of resources and time. So in this version 12 Nextjs decided not to use Bable anymore but instead they use the Rust compiler built on SWC (swc is a new competitor of Babel. It is written in Rust and is up to a year faster. 20 times) thanks to the use of Rust compiler, Nextjs’ build and refresh speed has been significantly improved:

Summary:

1. Great codebase build speed improvement: They also tested by building one of the largest Nextjs repos in the world, the time when using Rust compiler, the build time takes about 2mins while if using Bable, the build time is up to 3-4mins
2. Improved Performance Observation: Does Nextjs Output refresh time both the client and server side are clearly improved including the compilation of compiled modules and files. That is, we can see the compile time each time hot reload
3. Webpack Improvements : Made many improvements to webpack including optimizing fast refresh.

2. Build in Middleware (BETA)

In the past, when there was no build in middleware, we often used the redux saga, or used some other ways such as using a combination of context, React HOC and store redux. The above methods are all very good, but there are also some disadvantages such as taking more time to code, needing a broader understanding to be able to build, … So let’s try to find out if Nextjs’ build in middleware (BETA) has points. What’s more useful in particular?

From Nextjs 12 onwards we can simply create a middleware for all pages using a _middleware.ts file located in the pages directory at the same level as the index and _app.js files. Or if you want to create separate middleware for each nested-route, just put _middleware at the same level as the route you want to use the middleware on. It’s that simple right?

In case you have sub-directories or nested-routes, the middleware will run in the top-down direction. For example, you have a route structure like this:

Then first the middleware part of the route /about will be run first, then the middleware part of /about/teams will run later.