What’s New In Next.js 12?
These days, Next.js is the most loved framework in the React ecosystem because of the great features that it provides such as hybrid static & server rendering, Typescript support, smart bundling, route pre-fetching and so on. On 26th October 2021, Next.js released its new version, which is Next.js 12. It includes features like performance optimization, middleware, react 18 support etc. If you’re going to use Next.js for your next project, then you are at the right place. Knowing the latest features of Next.js 12 will help you in development. Let’s see the amazing new features of Next.js 12.
What’s New In Next.js 12?
1. Middleware-
Middleware enables you to catch HTTP request and run some code and logic before it is complicated. We know that having middleware in web application is not new and you can experience similar concept being used in other programming languages or in Javascript frameworks such as Express.js.
One of the benefit of having middleware in next.js 12 is that you can combine it with the features offered by the framework. While implementing a middleware, create a file as _middleware.js in directory which includes the routes that you want to intercept. If you want to create middleware that will manage web app pages, create a fine in /pages/_middleware.js.
import { NextResponse } from "next/server";
const secretKey = "preview-mode";
export function middleware (request) {
const headerKey = request.headers.get("secret-key");
if (headerKey === secretKey) {
return NextResponse.next();
}
return new Response(null, { status: 401 });
}Programmers can use a Middleware for various use cases like localization, logging, Redirect/Rewrite, authentication, A/B testing and so on. Middleware makes use of runtime that supports standard Web APIs. If anyone want to implement a middleware in Next.js app, just run it locally using next start, or host it on Edge platforms such as Vercel, using brand new Edge Function.
Vercel Edge Functions are serverless functions such as AWS Lambda or Azure Functions, except that they are deployed in CDNs, close to end users, enabling web app to work faster.
2. ES module support and URL import-
In the Next 12 version, ES module support is default. ES modules is official ECMAScript module standard for Javascript and supported by Node.js and its major browsers.
Next 12 prioritizes ES modules over CommonJS. But still it supports importing NPM modules that use CommonJS. It helps developers to incrementally adopt ES modules without affecting changes. Next 12 experimentally supports URL imports of packages that use ES modules. Meaning that a package can be imported directly from URL and there is no need for installation or separate build step. Also, these packages are cached locally to support offline development. It results that Next.js can process remote HTTP(S) resources such as local dependencies.
Next supports both client and server URL import. When Next detects URL import, it creates a next.lock file to track remote resource. While using this feature, add allowed URL prefixes inside next.config.js:
module.exports = {
experimental: {
urlImports: ['https://cdn.skypack.dev']
}
}
And import modules:
import confetti from 'https://cdn.skypack.dev/canvas-confetti'Any CDN which serves ES modules will work. For instance, JSPM, unpkg and jsDelivr.
3. Rust compiler-
Performance optimization is a key feature of Next 12. So as to improve the performance, Next.js replaced the Babel compiler with an extensible Rust compiler – SWC. It takes the advantage of native compilation. SWC is faster than Babel on a single thread and 70 times faster on four cores.
With Rust compiler, Next.js offers optimized bundling and compiling with 3 times faster builds for production. This results in faster build time on production and quick feedback in local development, better developer experience and faster development time.
4. Smaller Images Using AVIF-
Inbuilt image optimization API of Next.js supports AVIF images. It enables 20 percent smaller images compared to WebP. This is opt-in feature and can be enabled by modifying image.format property in next.config.js file:
module.exports = {
images: {
formats: ['image/avif', 'image/webp']
}
}5. Bot-aware ISR fallback-
ISR(Incremental Static Regeneration allows you to update static pages after building website without need to rebuild a complete website. With the use of ISR, static pages are generated dynamically at runtime rather than build time. While using ISR, Next.js determines the pages to be generated by static site generation using paths returned from getStaticPath function. Thus if you return paths to the 1000 most viewed articles, these pages are generated at build time.
Other pages in application can be generated on demand using fallback:blocking or fallback:true.
fallback:blocking is favored because when a request is made to a page that has not been generated, Next will server-render that page the first time and serve subsequent requests from the cache. However, while using fallback:true, Next.js will promptly serve a static page on the first request with loading state. And when the data finishes loading, Next will re-render the page and cache the data. But with the Bot-Aware ISR fallback feature, when using fallback: true for web crawlers like search bots, Next.js will automatically server-render ISR pages. However, Next will still serve a static page with loading state to noncrawler user agents. Hence it prevents crawlers from indexing loading states.
6. React 18 Support-
Even before the officially release of Next.12, it provides support for React 18. Now, you can use experimental features such as React.lazy, Suspense or APIs such as startTransition in Next.js apps. With the support for React concurrent mode, now we can use server-side Suspense and SSR streaming.
