Next.js 11.1 Release: New Features, Rust‑Based Toolchain, and Performance Boosts

Next.js 11.1 was released on August 12, causing a stir in the frontend community. Two main reasons are the addition of the SWC author (DongYong Kang) and a Parcel contributor (Maia Teegarden), and the shift of the frontend toolchain towards Rust or Go.

Key Improvements in Next.js 11.1

Security Patch : Prevents an open‑redirect vulnerability in pages/_error.js .

ES Modules Support : Available behind an experimental flag; can be enabled via experimental.esmExternals = true in next.config.js .

Rust‑based Toolchain : Integrates SWC to replace Babel and Terser.

Faster Data Fetching : Up to 2× faster using HTTP keep-alive .

Improved Source Maps : Build time increase only 11% while reducing memory usage by ~67% and runtime overhead by ~70%.

ESLint Integration : New accessibility and spelling rules.

next/image Optimizations : Optional Sharp support, lazy placeholder generation, custom loader, and configurable cache TTL.

Security Patch Details

The team collaborated with security researchers (including Gabriel Benmergui from Robinhood) to patch an open‑redirect risk in pages/_error.js . The issue does not affect Next.js apps hosted on Vercel.

ES Modules Support

From Next.js 11.1 you can enable ES Modules by setting the experimental flag in next.config.js :

module.exports = {
  experimental: { esmExternals: true },
};

In Next.js 12 this option will become the default.

Adopting the Rust‑Based SWC

SWC, a super‑fast Rust compiler for JavaScript/TypeScript, replaces Babel and Terser. Early tests show compilation time dropping from 500 ms to 10 ms and minification from 250 ms to 30 ms, roughly a 2× speed‑up.

Performance Boosts

Builds and Data Fetching

Using next build with many HTTP requests now averages a 2× speed increase. HTTP keep-alive is enabled by default, and benchmarks show pre‑rendering is also ~2× faster.

To disable keep‑alive for specific fetch calls:

import { Agent } from "https";
const url = "https://example.com";
const agent = new Agent({ keepAlive: false });
fetch(url, { agent });

To globally disable it, add to next.config.js :

module.exports = {
  httpAgentOptions: { keepAlive: false },
};

Source Maps

Optimizations reduce source‑map overhead by ~70% in CPU and ~67% in memory. Enabling productionBrowserSourceMaps: true adds only ~11% build time.

The Sentry Next.js plugin further speeds up source‑map uploads.

ESLint Optimizations

Built‑in next lint now includes additional accessibility rules (aria‑props, aria‑proptypes, aria‑unsupported‑elements, role‑has‑required‑aria‑props, role‑supports‑aria‑props) and spelling checks for common data‑fetching functions.

next/image Optimizations

WebAssembly‑based optimizer with optional sharp for non‑cached images.

Lazy‑generated blur placeholders during development.

Support for third‑party image loaders via images.loader: "custom" in next.config.js .

New onLoadingComplete callback fires when an image fully loads.

Configurable images.minimumCacheTTL for cache control.

Example of lazy placeholder usage:

import Image from "next/image";
import author from "../public/me.png";
export default function Home() {
  return (
    // The placeholder for this image is lazy‑generated during development
);
}

Community Impact

Next.js now has over 1,700 independent developers, partners like Google and Facebook, and a core team. In the last six months npm downloads grew 50% (from 4.1 M to 6.2 M) and usage on Alexa‑top‑10k sites increased by 50%.

References

For the full list of source links, see the original article’s reference section.