Summary

Next.js 12 is a major release focused on build/runtime speed, edge-first middleware, and early support for React 18 features. It introduces a Rust-based compiler (SWC) for much faster builds and refresh, edge-capable Middleware (beta), experimental React 18 and Server Components support, URL imports/ESM improvements, AVIF image support, and output file tracing for standalone deployments.

Upgrade quickly: npm i next@latest.

Key Points

• Rust compiler (SWC): ~3x faster Fast Refresh and ~5x faster production builds; swcMinify: true enables faster minification. Backwards-compatible with custom Babel configs.
• Middleware (beta): run code before a request completes (rewrite, redirect, headers, streaming). Create pages/_middleware.js and use standard Web APIs (Response, fetch). Works on Edge.
• React 18 & Server Components (experimental): enable with experimental.concurrentFeatures: true and serverComponents: true to try SSR streaming, Suspense and component-level data fetching.
• ES Modules & URL Imports (experimental): ESM is default; import modules from URLs by allowing prefixes in next.config.js (experimental.urlImports). Next.js generates next.lock and caches remote modules.
• AVIF images: opt-in via images.formats = ['image/avif','image/webp'] for ~20% smaller images when supported.
• Bot-aware ISR fallback: crawlers auto-render ISR pages (fallback: true) to avoid indexing loading states.
• Output file tracing: Next.js uses @vercel/nft to trace and emit required files per page/route to simplify deployments and enable smaller standalone outputs.
• Misc: support for next.config.mjs, custom tsconfig.json path, improved Fast Refresh telemetry, single-file next lint --file.

Breaking Changes & Notes

• Webpack 4 removed; webpack 5 is required. Test plugins/loaders for webpack 5 compatibility.
• Many features are experimental; enable explicitly and test before production use.

Practical Action Items

• Run npm i next@latest, test local dev and production builds.
• If using custom Babel, verify behavior; opt into SWC minifier with swcMinify: true when ready.
• Audit middleware, react-18 flags, and any webpack plugins for compatibility before upgrade.