Credit: Dreamstime
Next.js 12, the latest version of Vercel’s web development framework for building React applications, highlights faster builds via a new Rust compiler along with native ES modules for JavaScript.
Described by Vercel as the biggest release of Next.js ever, Version 12 was introduced October 26. The Rust compiler in the release was built on swc JavaScript/TypeScript compiler technology and leverages native compilation. Builders of Next.js have optimised bundling and compiling, with a roughly threefold faster refresh locally for compilation and an approximately fivefold increase for production builds.
Version 12’s compiler also boosts speed for large codebases, and developers have improved observability into compiler performance. Underlying improvements to the webpack module bundler optimise Fast Refresh and make on-demand entries more reliable.
Developers can update to Next.js 12 by running: npm i next@latest
Other improvements in Next.js 12:
- ES modules are supported, bringing an official, standardised module system to JavaScript. Smaller package sizes and JavaScript bundles are enabled for a better user experience. In Next.js 11, experimental support for ES modules was prioritised over CommonJS modules. Version 12 makes it the default. Also, experimental support is offered for importing ES modules through URLs.
- The introduction of middleware capabilities enables developers to use code over configuration. Developers can run code before a request is completed. Middleware can be used for anything that shares logic for a set of pages, including authentication, bot protection, redirects and rewrites, server-side analytics, and other functions.
- With React 18 support, features such as Suspense, automatic batching of updates, and APIs like
startTransitionare supported under an experimental flag, as is a new streaming API for server rendering with support forReact.lazy. - React Server Components, now supported in an alpha stage, enable rendering of everything, including components themselves, on the server. With Server Components, there is no need for client-side JavaScript, making page rendering faster and improving the user experience of applications.
- The built-in image optimisation API now supports AVIF images, enabling 20 per cent smaller images compared to WebP. This feature now is in an opt-in state.
- Web crawlers, or search bots, will automatically server-render ISR (Incremental Static Regeneration) pages using
’fallback: true’. - With output file tracing, Next.js automatically traces which files are needed by each page and API route.
- Fast Refresh now uses a WebSocket connection instead of an EventSource connection.
