Last checked and updated on April 18, 2026What Is New in Next.js 12
Next.js 12 delivers a significant performance leap and powerful new primitives for the modern web. The cornerstone is replacing Babel with the Rust-based SWC compiler, bringing up to 3x faster refreshes and 5x faster builds. It also introduces foundational features like Middleware and React 18 support.
| Category | Key Changes |
|---|---|
| Core Compiler | SWC replaces Babel for compilation and minification, enabling massive speed improvements. |
| React 18 | Support for new features like Suspense SSR and the new root API, paving the way for concurrent features. |
| Infrastructure | Introduction of Middleware (Beta) for code execution before a request is completed. |
| Native Improvements | AVIF image support, URL imports (experimental), and bot-aware ISR fallback. |
| Developer Experience | Improved ESLint integration, smaller installed size, and a refreshed design for the error overlay. |
How does the new Rust compiler improve Next.js 12?
The switch to SWC is the most impactful change for developer speed. In practice, you get faster Fast Refresh and significantly quicker production builds. This matters because it reduces feedback time during development, especially in larger applications.
SWC handles both compilation for development and minification for production. The minification step alone is up to 7x faster than Terser. This built-in, Rust-powered toolchain simplifies configuration while unlocking raw performance gains across the board.
What can you build with Next.js Middleware?
Middleware, currently in Beta, runs code before a request reaches your page. It's perfect for operations that need to happen on every request, like authentication, logging, or handling geolocation. You create it in a _middleware.js file at the page or root level.
This feature uses the Web Request and Response APIs, giving you fine-grained control. For example, you can rewrite the request, redirect the user, or add custom headers before the page even starts rendering. It's a powerful, low-level primitive for custom routing and personalization logic.
Does Next.js 12 work with React 18 features?
Yes, Next.js 12 provides support for React 18's new APIs, including the new concurrent features. You can opt into the react@experimental and react-dom@experimental packages to start using features like Suspense for Server-Side Rendering (SSR).
The framework lays the groundwork for streaming SSR, where you can send component HTML as it's ready. This is a foundational upgrade that enables more responsive applications by allowing the client to start rendering earlier, without waiting for the entire page to be ready on the server.
What image and import improvements were added?
The next/image component now supports the AVIF format, which provides significantly better compression than WebP. This means smaller image files and faster page loads for users with supported browsers.
Experimental URL Imports
A new experimental feature allows you to import packages directly from URLs within next.config.js. This bypasses the need for node_modules installation for specific modules, enabling faster, more dynamic dependencies. It's a step towards a more flexible, CDN-based ecosystem.
FAQ
Is the switch from Babel to SWC a breaking change?
For most projects, no. SWC is designed to be a drop-in replacement. However, if you rely on custom Babel plugins, you'll need to find SWC alternatives or temporarily opt-out until SWC plugin support matures.
Can I use Middleware for API routes?
Yes. Middleware runs for both page and API routes. You can place a _middleware.js file inside the /pages/api directory to intercept and process API requests before the route handler runs.
How do I enable React 18 in my existing Next.js 12 project?
First, install the experimental React packages: npm install react@experimental react-dom@experimental. Then, ensure you are using the new root API in your pages/_app.js file. The Next.js team provides detailed upgrade instructions in their blog post.
What happens to my existing Terser configuration for minification?
SWC's minifier is now the default and is significantly faster. Any custom Terser configuration in next.config.js will be ignored. You can disable SWC minification if needed, but the recommendation is to migrate.
What is "bot-aware ISR fallback"?
It's an improvement to Incremental Static Regeneration. When a page hasn't been generated yet, a "fallback" version is shown. Now, the system can detect crawler bots (like Google) and serve them a fully static, waiting page instead of the loading state, which is better for SEO.