Next.js latest version Whats New in Next.JS 12?

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:

• Rust Compiler: Offers 3 times faster Refresh along with 5 times faster builds.
• Middleware: The beta version Middleware enables developers to write code over configuration.
• Support for React 18: Next.js 12 supports the new features of React 18.
• AVIF Support: Next.js 12 is preferable for 20% small images.
• Bot-aware ISR Fallback: The dynamic features of Next.js includes SEO optimization for web crawlers.
• Support for Native ES Module: Here you will get an aligned standard module system.
• URL Imports: The alpha version allows you to import packages from any anonymous URL and you are not required to install them.
• React Server Components: You will get all the react server components with SSR streaming as well.

Rust Compiler is introduced for faster builds and quick refresh

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.

Some other attractive features of this dynamic release are:

• Improved speed for bigger databases: The Next.js team has validated the Rust compiler against some largest codebases across the world. In this practical implementation, improved speed is monitored.
• Improvised performance: The current release of Next.js that is Next.js 12 now delivers Fast Refresh timing in the console for both the parties (client & server). Further, it also includes the number of files and modules compiled.
• Improvements in Webpack: Next.js 12 has brought improvisations to the webpack as well. Further, it makes the on-demand entries more reliable by maintaining the Fast Refresh.

Replacement of Babel with SWC

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.

Replacement of Terser with SWC

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.jsmodule.exports = {  swcMinify: true}

Middleware Introduction

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

• Authentication
• Bot protection
• Redirects and rewrites
• Handling unsupported browsers
• Feature flags and A/B tests
• Server-side analytics
• Advanced i18n routing requirements
• Logging and many more

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.jsexport function middleware(req, ev) {  return new Response('Hello, world!')}

Improved Styled-jsx CSS parsing

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.

Improvements with React 18

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 Facebooks React 18 to make it compatible with all the new updates of React 18.

No further support for Webpack 4

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.

Support for ES Modules

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.

Support for URL imports

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.jsmodule.exports = {  experimental: {    concurrentFeatures: true  }}

Bot-Aware ISR Fallback

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.

Smaller Images through AVIF
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:

The addition of pages like /_app.js or pages/_document.js to the application will replace the built-in version automatically even without the need for a reboot of the Next.js CLI.
Setting a custom tsconfig.json path is now supported by Next.js 12.

Using the shared worker pool, the static pages can be checked.
The concept uses WebSocket connection in place of EventSource connection.

Bot-Aware ISR Fallback

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.

Conclusion

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.