Next.js 12

Middleware gives you the possibility to run code before a request is complete and based on the incoming request, you can rewrite, redirect, add headers or even stream HTML. It can be used for anything that shares logic for a set of pages, including:

Authentication

Bot protection

Redirects and rewrites

Handling unsupported browsers

Feature flags and A/B tests

Server-side analytics

Advanced i18n routing requirements

Logging

• And more!

The new update comes with support for React 18, which is starting to become stable. Some new interesting features from React 18 would be Suspense, APIs like startTransition and a new streaming API for server rendering with support for React.lazy

React Server Components allow us to render everything on the server, including the component themselves. This is completely different from SSR which you pre-generate HTML on the server. With these components, there won't be any client-side JS needed => faster rendering. 

To make this kind of components, all you have to do is to name the file Filename.server.js. 

This new Next.js version includes experimental support for importing ES Modules through URLs, no install or separate build. You just need to declare the list of allowed URLs inside the next.config.js inside the experimental field, at urlImports. Any CDN that serves ES modules will work, including tools like Framer: Skypack, esm.sh, jsDelivr, JSPM, unpkg. 

In Next.js 12, web crawlers (e.g. search bots) will automatically server-render ISR pages using fallback: true, while still serving the previous behavior of the fallback state to non-crawler User-Agents. This prevents crawlers from indexing loading states.

The built-in Image Optimization API now supports AVIF images, enabling 20% smaller images compared to WebP.

AVIF images can take longer to optimize compared to WebP, so this feature is opt-in using the new images.formats property in next.config.js,as shown in the picture above.

• After webpack 5 was the default in Next.js 11, officially the webpack 4 was removed. 
• target in next.config.js is no longer needed.
• next/image now uses a span as the wrapping element instead of a div.
• The minimum Node.js version has been bumped from 12.0.0 to 12.22.0, which is the first version of Node.js with native ES modules support.