DEV Community

Med O. for Hamo Studio

Posted on

Next JS – what’s new ?

NextJS is an easy-to-use frontend development framework that was developed on top of React. Next. js is based on ReactJS, & has many of the same core features.

NextJS 12 is the current version, it comes with many new features , such as, performance optimization, React 18 support, middleware, and more.

Rust compiler x5 faster !

NextJS 12 includes a brand new Rust compiler, faster for production, that takes advantage of native compilation.

NextJS Rust compiler is built on SWC, an open platform for the next generation of fast tooling. Optimized bundling and compiling with ~3x faster refresh locally and ~5x faster builds for production.

Middleware

According to the official documentation, middlewares enables developers to use code over configuration. This means you can run code before a request is completed, and based on the request, you can modify the response by rewriting, redirecting, adding headers, etc.

Middleware can be used for anything that shares logic for a set of pages, including:

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

React 18 support

React 18 is still in beta realease ( at time of writing this article.)

However, React 18 features such as server-side suspense and the automatic patching of updates are now available in Next.js 12 under an experimental flag as Next prepares for React 18 when it moves toward a stable release.

Images Optimization using AVIF

built-in Image Optimization API now supports AVIF images, enabling 20% smaller images compared to WebP.

AVIF images can take longer to optimize compared to WebP images, so NextJS team made this feature opt-in using the new images.formats property in next.config.js

Other improvments

List of other improvments comes with Next12 includes:

ES module support and URL import.
Bot-aware ISR fallback.
Output file tracing
And more..

If you are interested in NextJS framwork, you can find the full article + code examples + usefull links here:
https://bit.ly/31gmdDg

I hope this article can helps you get new information & to learn new things.
See you in the next article.

Discussion (0)