Javascript

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: ['https://cdn.skypack.dev', 'https://cdn.anymodule.site']  
}  
}  


Now you can import the module by
import confetti from 'https://cdn.skypack.dev/canvas-confetti'

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']  
}  

Notes

  • 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