DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Cool Features Of Next JS 12
Raghav Mrituanjaya
Raghav Mrituanjaya

Posted on • Updated on • Originally published at thegogamicblog.xyz

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']
    }
}
Enter fullscreen mode Exit fullscreen mode

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!')
}

Enter fullscreen mode Exit fullscreen mode

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']
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

Collapse
 
rangercoder99 profile image
RangerCoder99

Rust Compiler doesn't work with your own Babel configuration so if you using styled-components it's useless for now and you're auto opt out.

URL Imports are an experimental feature!
Middleware supports is in BETA!!! So be careful if you want use that in production!

Collapse
 
mikenatsu profile image
MikeNatsu

Hmm im not sure how it works but i think im using the rust compiler along with styled components, but only works with yarn. (Resolutions)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!