A framework that keeps redrawing boundaries
Next.js, the React framework developed by Vercel, has built its identity on the ability to shift rendering logic between client and server based on context. With version 12, released in October 2021, the framework adds a third layer — the edge — and accelerates compilation with a toolchain change that signals a broader trend in the JavaScript frontend.
Middleware: logic at the edge
The main architectural addition is Middleware: code that runs before a request reaches the page, directly at the edge of the distribution network. Middleware can rewrite URLs, redirect, add headers, read cookies, implement authentication or A/B testing — all with millisecond-level latencies, without the request needing to reach the origin server.
Middleware uses standard Web APIs — Request, Response, fetch — and is designed for lightweight execution environments such as cloud providers’ edge functions. It has no access to the file system or the full Node.js runtime: it is an intentionally limited subset that favours distributed execution.
SWC: Rust-powered compilation
Next.js 12 replaces Babel with SWC, a JavaScript/TypeScript compiler written in Rust. The result is compilation up to six times faster in code transformation and up to seventeen times faster in minification compared to Terser. For large projects where build time is measured in minutes, the gain is tangible.
SWC is not a Vercel internal project: it is an independent open source compiler created by Donny (alias kdy1). Next.js’s decision to adopt it confirms an ongoing trend: JavaScript build tools rewritten in compiled languages — Rust or Go — to overcome the performance limitations of the Node.js runtime during the build phase.
React Server Components (experimental)
Next.js 12 introduces experimental support for React Server Components (RSC), which allow executing components exclusively on the server. Server components send no JavaScript to the browser: their output is serialised HTML, yielding a lighter client bundle and faster initial rendering.
The integration is experimental and requires explicit configuration. Stabilisation will occur in subsequent versions, where Server Components will become the default model.
ISR: mature incremental regeneration
Incremental Static Regeneration (ISR), introduced in earlier versions, matures in Next.js 12. ISR allows regenerating individual static pages in the background after a configured interval expires, without rebuilding the entire site. The static page is served from cache while the new version is generated: the user perceives no wait.
Rendering as a spectrum
With SSG, SSR, ISR, Middleware and experimental React Server Components, Next.js treats rendering not as a binary choice but as a spectrum: every page, every component can adopt the strategy best suited to its use case. The framework takes on the complexity of orchestrating these strategies, leaving the developer to decide where each part of the application should execute.
Link: nextjs.org