Next.js 12, the latest version of Vercel’s web development framework for building React apps, highlights faster builds via a new Rust compiler as well as native ES modules for JavaScript.

Described by Vercel as the largest version of Next.js ever made, version 12 was released on October 26. The Rust version compiler was built on the JavaScript / TypeScript swc compiler technology and takes advantage of native compilation. The builders of Next.js have optimized bundling and compilation, with local refresh about three times faster for compilation and about a fivefold increase for production versions.

The version 12 compiler also increases the speed of large code bases, and developers have improved observability of compiler performance. The underlying enhancements to the webpack module bundler optimize fast refresh and make on-demand inputs more reliable.

Developers can update to Next.js 12 by running: npm i [email protected]

Other improvements in Next.js 12:

• ES modules are supported, bringing an official and standardized module system to JavaScript. Smaller size packages and JavaScript bundles are enabled for better user experience. In Next.js 11, experimental support for ES modules was prioritized over CommonJS modules. Version 12 makes this the default. Additionally, experimental support is provided for importing ES modules via URLs.
• The introduction of middleware capabilities allows developers to use code rather than configuration. Developers can run code before a request is complete. The middleware can be used for anything that shares the logic of a set of pages, including authentication, bot protection, redirects and rewrites, server-side scans, and other functions.
• With React 18 support, features like Suspense, automatic update bundling, and APIs like startTransition are supported under an experimental flag, as is a new streaming API for server rendering with support for React.lazy.
• React Server Components, now supported in an alpha stage, allows everything, including the components themselves, to be rendered on the server. With server components, there is no need for client-side JavaScript, which speeds up page rendering and improves the user experience of applications.
• The built-in Image Optimization API now supports AVIF images, allowing images 20% smaller than WebP. This feature is now in an opt-in state.
• Web crawlers, or search bots, will automatically render ISR (Static Incremental Regeneration) pages on the server using ’fallback: true’.
• With output file tracing, Next.js automatically traces the files needed for each page and API route.
• Fast Refresh now uses a WebSocket connection instead of an EventSource connection.