Big Next.js upgrade has new Rust compiler, ES Modules support

Faster builds and new middleware capabilities are also highlighted in Version 12 of web framework.

Thinkstock
By Paul Krill
Editor at Large, InfoWorld
Oct 28, 2021 3:00 AM

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 optimized 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 optimize 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, standardized 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 prioritized 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 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, 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 optimization API now supports AVIF images, enabling 20% 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.