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
ornpm i next@12.0.1
to install Next.js 12 - Support me on Patreon
Top comments (2)
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!
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)