Mayank Patel
Oct 13, 2021
6 min read
Last updated Nov 16, 2023
The biggest release Next.js Conf is now here. If you are looking to know about Next.js latest version, we have brought the information exclusively. Also, capture what is new in Next.js 12 and keep yourself ahead of your competitors.
This new version has brought exclusive features that ease the development process by maintaining the quality as well.
These features include:
As we know technologies are upgraded to make an application more appealing, productive, and interactive. Hence, Next.js 12 has incorporated the Rust compiler that makes executions by leveraging the benefits of native compilation.
The Rust compiler of Next.js 12 is developed on SWC. For those who are unaware of SWC, it is an open-source for the next generation of fast tooling. With this combination, Next.js delivers 3 times faster refresh and 5 times faster build.
Being a developer, this is the most attractive feature because it makes the process of development sorted, effortless, and result-oriented.
As stated, earlier Next.js 12 has utilized the features of Rust-based complier SWC in place of Babel in order to execute JavaScript or TypeScript. Moreover, with the version, the developers get full support for the applications having custom Babel configuration.
So, no need to worry about the compilation because Next.JS 12 comes with complete compatibility.
Additionally, the by default transformations like tree-shaking of getStaticProps / getStaticPaths / getServerSideProps and styled-jsx is now shifted to Rust.
The amazing thing about Next.js 12, it offers quick implementation of SWC for an application developed using Babel configuration. It means, no matter even if the application is developed using Babel, the new version automatically compiles JavaScript or Typescript through SWC.
Also, the compilation is done as per the same method of Next.js 11. The concept has sorted the compatibility issues from one version to another.
To minify the JavaScript with 7 times faster execution, developers can select SWC over Terser. The required flag in next.config.js is:
// next.config.js
module.exports = {
swcMinify: true
}With Middleware, the developer becomes able to use code over configuration. As Next.js has introduced Middleware, hence here you will get the flexibility to run the code prior to the completion of the request.
Further, the modification can be made by, redirecting, rewriting, adding headers, or even streaming HTML based on the response from the user.
Middleware is useful for the features that contain logic. These features are like
Furthermore, Middleware follows defined runtime and it supports APIs like fetch. Also, it works exceptionally well by using the next start. Further, it efficiently works for Edge platforms such as Vercel that uses Edge functions.
If you are looking to use Middleware in Next.JS, follow the given code after creating a file pages/_middleware.js
// pages/_middleware.js
export function middleware(req, ev) {
return new Response('Hello, world!')
}The implementation of the new CSS parser is made by following the old one. As we know, the parser executes the styled-jsx Babel transform. The handling of CSS is now easy in Next.js 12.
It also reflects an error for invalid CSS that is not the case in the older version, and it reflected unexpected behavior. The improved version throws all the errors during development only. Also, only styled-jsx is affected by the change.
As we have mentioned in our blog “the new features of React 18”, that this version will come up with the features of Automatic Batching, APIs such as “startTransition”, Suspense, etc., so the Next.js team is closely working with the team of Facebook’s React 18 to make it compatible with all the new updates of React 18.
Developers engaged with Webpack 5, do not need to go through this. The section is useful for those who are working using Webpack 4.
Being a Next.js developer, you must know, Next.js works using webpack 5 for all the compilations in the version Next.js 11. Hence in the new upgraded version Next.js 12, there is no support available for webpack 4.
If your project is developed with webpack 4, now you will get an error there. So, we recommend revising the code accordingly and avoiding unnecessary errors.
Next.js 12 has support for ES modules that addons a standardized and professional module system to JavaScript. All major browsers including Node.js support it.
The concept offers a better user experience because it pushes the web ecosystem by enabling Java script bundles and smaller size packages both. Further, their support is available for developers, when the JavaScript ecosystem changes from common JS to ES module.
With the implementation of Next.js 12, developers are free to ES modules from any URL, without having any separate build or installation process. Through this feature, the technical team gets the flexibility to use any package straight from the URL.
As a result, Next.js 12 executes HTTP(S) remotely same as local dependencies.
To use the feature, follow the code by allowing URL prefixes in next.config.js:
// next.config.js
module.exports = {
experimental: {
concurrentFeatures: true
}
}Web Crawler or search bots in Next.js 12 automatically server-render the ISR pages by using the code “fallback: true”. Further, it also maintains the older behavior of the fallback state to non-crawler agents.
Because of this, crawlers are prevented from indexing loading states.
With the new update of Next.js, now there is no need to wait for the images that take longer than the expected time to optimize. As compared to WebP, here you will have 20% smaller images that further ease the optimization process.
Some other improvisations of Next.js 12:
Web Crawler or search bots in Next.js 12 automatically server-render the ISR pages by using the code “fallback: true”. Further, it also maintains the older behavior of the fallback state to non-crawler agents.
Because of this, crawlers are prevented from indexing loading states.
So, guys, these are the changes done in the new version of Next.js. Further, Linearloop is one of the recognized Next.js companies in India and the USA, and hence we make sure to keep spreading awareness about the technology upgrade.
The announcement is made a few hours ago only, and we are here with all the details. If you need any kind of assistance, feel free to get in touch. Our team will explain in the best possible way.
