Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteTo upgrade a Next.js 15 application to Next.js 16, first confirm it meets the new runtime requirements, then run the upgrade codemod or update the packages manually. The codemod handles several mechanical changes, but you still need to check async request APIs, bundler compatibility, image settings, middleware behavior, and your lint and CI commands. Finish by running the upgraded app’s own type checks, linting, production build, and route-specific tests.
Check prerequisites and identify your starting version
The Next.js 16 upgrade guide lists Node.js 20.9.0 as the minimum and says Node.js 18 is no longer supported. If the project uses TypeScript, the listed minimum is TypeScript 5.1.0. The documented browser baselines are Chrome 111+, Edge 111+, Firefox 111+, and Safari 16.4+; confirm these targets suit your users before upgrading.
As an Amazon Associate I earn from qualifying purchases.
Record the installed Next.js version before choosing a command. The built-in next upgrade command is documented for Next.js 16.1.0 and later, not as the general path for every Next.js 15 project.
Recommended Free Tools
Choose an upgrade route
| Route | Command or action | What to expect |
|---|---|---|
| Codemod from the version 16 guide | pnpm dlx @next/codemod@canary upgrade latest |
Applies supported automated changes. Review the diff and complete application-specific work yourself. |
| Built-in upgrade command | pnpm next upgrade |
Supported starting with Next.js 16.1.0, according to the general upgrading guide. |
| Manual package update | pnpm add next@latest react@latest react-dom@latest |
Updates the packages without relying on the codemod for code changes. If using TypeScript, the version guide also advises updating @types/react and @types/react-dom. |
For versions earlier than 16.1.0, the general upgrade guide points to npx @next/codemod@canary upgrade latest. Follow the command path that matches your installed version and package-manager workflow. Whether you use a codemod or manual edits, inspect the resulting changes rather than treating a completed command as proof that the migration is finished.
#1 Best Overall
Update request APIs to asynchronous access
Next.js 16 removes synchronous compatibility for request-time APIs. Review uses of cookies(), headers(), and draftMode(), along with route params and page searchParams. Update code to access these values asynchronously with async/await or the applicable React use() pattern.
Do not limit the search to page and layout components. Route handlers, metadata files, and generated assets can also be affected. The guide specifically calls out parameters used by opengraph-image, twitter-image, icon, and apple-icon files, as well as sitemap generation and its IDs.
Where useful, use the generated PageProps, LayoutProps, and RouteContext helpers to type route inputs. Run npx next typegen to generate these helpers, then type-check the app to find signatures and call sites that need updating.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #2
Check whether the default bundler fits your project
Next.js 16 uses Turbopack by default for both next dev and next build. A custom webpack configuration can cause the default Turbopack build to fail, so inspect next.config.js and dependencies that rely on webpack loaders or plugins before relying on the new default.
Make an explicit decision for the project’s bundler setup, then validate both local development and the production build. A development server starting successfully does not establish that the production build will work.
Audit image settings and image URLs
Review every relevant next/image configuration and local image URL. Next.js 16 changes several optimizer defaults that can affect caching, requested output sizes, remote redirects, and private-network sources.
- Local query strings: If local image URLs include query strings, configure matching
images.localPatterns.searchpatterns. - Cache duration: The default
images.minimumCacheTTLchanges from 60 seconds to 14,400 seconds (4 hours). Set a shorter explicit value if the previous refresh cadence is necessary. - Small image sizes: The default
images.imageSizesno longer includes 16. Add it explicitly if the app needs 16px sources. - Quality values: The default
images.qualitiesallowlist is[75]. Values outside the configured list are coerced to the closest permitted value, so add the qualities your app needs. - Local and private IPs: Optimization for local IP addresses is blocked by default. The guide describes
images.dangerouslyAllowLocalIPas dangerous and limits its suggested use to private networks. - Remote redirects: The default maximum redirect count changes from unlimited to 3. Check remote image sources that redirect more than three times.
Two older interfaces are deprecated: replace images.domains with images.remotePatterns, and replace next/legacy/image imports with next/image.
Decide whether to rename middleware to proxy
The middleware convention is deprecated and renamed to proxy. Where the new convention fits, update the filename, named export, and related configuration flags. Proxy runs on Node.js, cannot be configured, and does not support the Edge runtime. The upgrade guidance says projects that need Edge runtime should keep using middleware pending further guidance.
Check runtime requirements before renaming files; this is not a purely mechanical choice if the existing middleware depends on Edge. The codemod can rename middleware, but it cannot determine whether the new runtime behavior suits the application.
Rank #4
Replace removed commands and configuration
Next.js 16 removes next lint, the Next config eslint option, AMP support, and the runtime configuration options serverRuntimeConfig and publicRuntimeConfig. Also, next build no longer runs linting. Update package scripts and CI so linting is invoked directly through ESLint or Biome, and move application settings away from the removed runtime config using an approach suited to the app.
If the project uses AMP APIs or next/amp, remove or replace that functionality as part of the migration. If it uses @next/eslint-plugin-next with a legacy .eslintrc file, review the ESLint configuration because the plugin defaults to flat config.
Review PPR, caching, and navigation changes separately
The experimental PPR flag and experimental_ppr segment setting are removed. The guide describes opting in through cacheComponents, but cautions that PPR in version 16 differs from Next.js 15 canaries. Treat this as a deliberate feature migration rather than an automatic prerequisite for moving to version 16.
Routing changes include layout deduplication and incremental prefetching. These can lead to more individual prefetch requests while transferring less data overall. If request counts, cache behavior, or navigation performance matter operationally, verify them in your own app instead of assuming the change will have a particular effect.
Next.js no longer overrides global smooth scrolling during SPA route transitions by default. To restore the prior override behavior, the guide documents data-scroll-behavior="smooth".
Validate the upgraded application
After package and code changes, use the checks that match your project rather than relying on the codemod’s completion status. A practical validation sequence is:
- Run the project’s type check, including generated route types if you use them.
- Run ESLint or Biome directly using the command configured for the repository; do not expect
next buildto run linting. - Run a production build and resolve bundler or configuration errors.
- Exercise routes and route handlers that read request APIs, plus metadata, image, and sitemap generation where used.
- Check representative local and remote images, including query-string URLs, and confirm the resulting caching and optimization behavior is acceptable.
- Test navigation and prefetch behavior if request volume or caching is important to the application.
- Run the project’s CI checks and review any environment-specific build or runtime failures.
Next.js 16 also introduces or stabilizes capabilities such as beta Turbopack filesystem caching, stable React Compiler support, an alpha Build Adapters API, and updated caching APIs. These are optional release features, not requirements for a basic upgrade. The React Compiler is disabled by default; enabling it can increase compile times because it relies on Babel. The App Router uses the latest React Canary release, including React 19.2 features.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
