This content originally appeared on DEV Community and was authored by Raghav Mrituanjaya
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.1ornpm i next@12.0.1to install Next.js 12 - Support me on Patreon
This content originally appeared on DEV Community and was authored by Raghav Mrituanjaya
Raghav Mrituanjaya | Sciencx (2021-10-27T06:16:24+00:00) Cool Features Of Next JS 12. Retrieved from https://www.scien.cx/2021/10/27/cool-features-of-next-js-12/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.