I Compiled All Next.js 16 Key Changes in Simple Words

Next.js 16 is here, and this release introduces a new explicit caching model, makes Turbopack the default bundler, and includes several significant API and architectural updates.

In this post, I will break down all the Next.js 16 key changes in simple words so you can understand what’s new without reading the full docs.

All Next.js 16 Key Changes

1. Caching Model: Explicit Caching with “use cache”

This is the most significant architectural change. The previous implicit caching of the App Router is being replaced by an explicit, opt-in model.

• Default is Dynamic: Out of the box, components and pages are now dynamic and execute at request time.
• Opt-in Caching: You must now use a new "use cache" directive to specify exactly what should be cached. This can be applied to pages, components, or functions.
• PPR Finalized: This new model is the completion of the Partial Prerendering (PPR) feature. You get static shells by default, with granular control over which dynamic parts are cached.

To enable this new model, you must add the following to your configuration:

// next.config.ts
const nextConfig = {
  cacheComponents: true,
};
 
export default nextConfig;

2. DX and Tooling Updates

Several updates focus on the development workflow.

• Turbopack is Stable & Default: Turbopack is no longer experimental and is the default bundler for all new projects. The documentation cites performance improvements of 2-5x faster production builds and up to 10x faster Fast Refresh. You can still force the use of webpack with the --webpack flag.
• Turbopack Filesystem Caching (Beta): A new beta feature allows Turbopack to cache compiler artifacts to disk, which should speed up restarts of the dev server.
• proxy.ts (formerly middleware.ts)
  • middleware.ts has been renamed to proxy.ts.
  • The purpose is to clarify that this file is the “network boundary” and runs on the Node.js runtime.
  • The old middleware.ts file is now deprecated but still functional for Edge runtime use cases for the time being.
• Improved Logging: Both next dev and next build output more detailed timing information, showing how long each step (e.g., “Compile,” “Render”) took.

3. New and Updated Caching APIs

With the new caching model come new APIs for cache control, primarily for use within Server Actions.

• revalidateTag(tag, profile) (Updated):
  • revalidateTag now requires a second argument, a cacheLife profile (e.g., 'max', 'hours', or an object like { revalidate: 3600 }).
  • The single-argument version is deprecated.
  • This enables stale-while-revalidate (SWR) behavior: it serves the stale content immediately while revalidating in the background.
• updateTag(tag) (New):
  • This Server Actions-only API provides “read-your-writes” semantics.
  • Use this when you need to expire a cache entry and get the fresh data within the same request (e.g., after a user updates their profile).
• refresh() (New):
  • This Server Actions-only API refreshes only uncached data on the page. It does not affect any cached data.
  • This is useful for updating dynamic, uncached elements (like a notification count) after an action.

4. Routing and React 19.2

• Routing Optimizations: The prefetching system has been updated.
  • Layout Deduplication: Prefetching multiple links that share a layout will now only download the layout once.
  • Incremental Prefetching: Only parts of a page not already in the client cache will be prefetched.
• React 19.2: Next.js 16 bundles the latest React canary, which includes React 19.2 features like View Transitions, useEffectEvent, and <Activity>.

5. Breaking Changes and Migration

This release includes several important breaking changes.

• Node.js 20.9+ is now required. Node.js 18 is no longer supported.
• Async params and searchParams: You can no longer access params or searchParams as synchronous props in pages or layouts. You must await them.
• Async cookies(), headers(), draftMode(): Similar to params, these functions must now be awaited.
• AMP is Removed: All AMP-related APIs (useAmp, config = { amp: true }) have been removed.
• Runtime Config is Removed: serverRuntimeConfig and publicRuntimeConfig are gone. Use standard environment variables.
• next/image Defaults:
  • images.minimumCacheTTL default is now 4 hours (was 60s).
  • images.qualities default is now just [75].
• default.js for Parallel Routes: All parallel route slots now require an explicit default.js file.

How to Upgrade to Next.js 16

You can use the provided codemod to help automate parts of the upgrade process.

# Run the automated codemod
npx @next/codemod@canary upgrade latest
 
# Or upgrade packages manually
npm install next@latest react@latest react-dom@latest

Ready to Learn Next.js 16?

If you are new to the framework, this v16 news might be a lot. A good place to start is with the fundamentals from our series:

• Next.js Introduction: A React Framework: This is the best place to begin. It covers the “what” and “why” of Next.js.
• Next.js vs React: Which Framework Should You Choose?: This article helps clarify the relationship between React and Next.js.
• React Foundations for Next.js: A solid refresher on the core React concepts you will need.
• Next.js CLI: Commands You Must Know: A practical guide to the basic commands for creating and running a project.