Cool Features Of Next JS 12

Cool Features Of Next JS 12

Today at Next.js conf, Vercel the company behind next.js announced the public availability of next.js 12 which brings a lot of cool features into action

Rust Compiler Makes build and Refreshes more faster

Next.js 12 includes a brand new Rust compiler that takes advantage of native compilation which gives 3x faster refresh locally and 5x faster builds for production which can reduce your CI/CD build time drastically. To turn on the Rust minify feature add swcMinify: true to your next.config.js file

URL Module Imports 😍

Next.js 12 supports CDN module imports which means you can import any HTTP(S) dependencies as a local module. To import any HTTP(S) module just add the following lines to your next.config.js file

module.exports = {  
experimental: {  
urlImports: ['', '']  

Now you can import the module by
import confetti from ''

I think it’s time to say goodbye to hefty node_modules 🤔. What do you guys think do let me know in the comments below

Middleware supports

If your app has a common logic for all the server-side rendering this is an amazing feature that lets you share logic between different pages

// pages/_middleware.js  
export function middleware(req, ev) {  
return new Response('Hello, world!')  

AVIF support 😍

Out of the box, Next.js 12 supports AVIF image optimization, Reducing your image size by 20% than WebP
To enable this feature just add the following to your next.config.js file

images: {  
formats: ['image/avif', 'image/webp']  


  • There were more features that were introduced on Next.js 12 which were not listed here as it contains only some of the cool features that I personally like. To know about all the features kindly read their blog post
  • Run yarn add next@12.0.1 or npm i next@12.0.1 to install Next.js 12

Share this post

About the author

Leave a Reply