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 optimise 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:
- 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
startTransitionare supported under an experimental flag, as is a new streaming API for server rendering with support for
- The built-in image optimisation API now supports AVIF images, enabling 20 per cent 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
- 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.