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

Bot-Aware ISR Fallback

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 <code>images.formats</code> property in <code>next.config.js,</code>as shown in the picture above.

Smaller images using AVIF

The new Rust Compiler takes advantage of native implementation and improved on speeds, making the refresh 3x faster and the builds 5x faster. It is optimised for large projects, with improvements on performance and webpack. Also, the builds are 17x faster than using Babel and the minification is 7x faster than using Terser.

Faster builds and Fast Refresh with Rust Compiler

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

Breaking changes

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.

React Server Components

<ul><li class="ql-align-justify">New rust compiler</li><li class="ql-align-justify">Middleware (beta)</li><li class="ql-align-justify">React 18 Support</li><li class="ql-align-justify"> AVIF Support</li><li class="ql-align-justify">Bot-aware ISR Fallback</li><li class="ql-align-justify">Native ES Modules Support</li><li class="ql-align-justify">URL Imports (alpha)</li><li class="ql-align-justify">React Server Components(Alpha)</li></ul>You can update the library on your local project with npm i next@latest

Summary

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:<ul><li class="ql-align-justify"> </li></ul><a class="idea-content-link" href="https://github.com/vercel/examples/tree/main/edge-functions">Authentication</a><ul><li class="ql-align-justify"> </li></ul><a class="idea-content-link" href="https://github.com/vercel/examples/tree/main/edge-functions">Bot protection</a><ul><li class="ql-align-justify"> </li></ul><a class="idea-content-link" href="https://github.com/vercel/examples/tree/main/edge-functions">Redirects and rewrites</a><ul><li class="ql-align-justify"> </li></ul><a class="idea-content-link" href="https://github.com/vercel/examples/tree/main/edge-functions">Handling unsupported browsers</a><ul><li class="ql-align-justify"> </li></ul><a class="idea-content-link" href="https://github.com/vercel/examples/tree/main/edge-functions">Feature flags and A/B tests</a><ul><li class="ql-align-justify"> </li></ul><a class="idea-content-link" href="https://github.com/vercel/examples/tree/main/edge-functions">Server-side analytics</a><ul><li class="ql-align-justify"> </li></ul><a class="idea-content-link" href="https://github.com/vercel/examples/tree/main/edge-functions">Advanced i18n routing requirements</a><ul><li class="ql-align-justify"> </li></ul><a class="idea-content-link" href="https://github.com/vercel/examples/tree/main/edge-functions">Logging</a><ul><li class="ql-align-justify">And more!</li></ul>

Middleware

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 18 on the horizon

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.

URL Imports

Next.js 12 introduces a brand-new Rust compiler, Middleware (beta), React 18 Support, Native ESM Support, URL Imports, React Server Components (alpha), and more!