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
// 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
• Support me on Patreon