NextJS 12 Game changer update !
- Tram Ho
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.
1. Improve build and refresh speed using Rust compiler.
- 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
2minswhile if using Bable, the build time is up to
- Improved Performance Observation: Does Nextjs Output
refresh timeboth 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
- 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.