After a busy 40 days working on a big project, I’m back with a special article for nearly all Next.js developers. The Next.js team has been working hard on both new and experimental features. So, Next.js 16 is a major release with improvements for performance and developer experience.

Many parts of Next.js now behave in a more predictable way. Hence, in this post, I’ll explain the most important changes in two parts. What's new and stable features in Next.js 16

Table of Contents

• 1. What’s Brand New in Next.js 16?
• 2. Major Upgrades and Stable Features
• 3. Important Changes for Upgrading
• 4. What’s Next?
• 5. Conclusion

1. What’s Brand New in Next.js 16?

This section covers features that are completely new in Next.js 16 and they are just introduced for the first time.

1.1. Cache Components: A New Approach to Caching

Cache Components change how caching works in Next.js. Caching is an opt-in feature which you can disable or enable it in next.config.ts. That means your code is dynamic by default, and you choose what should be cached. This makes behavior more explicit and easier to understand.

Cache Components are built around a new directive called use cache. With it, you can cache pages, components, and functions. This feature is also the evolution of what was previously called Partial Prerendering (PPR).

To start using Cache Components, you can enable them in your next.config.ts:

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

export default nextConfig;

You can find different examples of how Cache Components works here.

1.2. Next.js Devtools MCP

Sometimes debugging takes your time but what if you have an assistant to debug your code and and give you some advices? Next.js 16 introduces an AI debugging assistant called Devtools MCP, an integration with the Model Context Protocol (MCP). The goal is to help AI tools understand what’s happening inside your app so they can assist with debugging and suggest fixes.

Devtools MCP can provide AI agents access to:

• Next.js routing, caching, and rendering.
• Unified logs from both the browser and the server.
• Show detail of errors automatically.
• Context about the current page that you are viewing.

If you use AI assistants in your workflow, this can make debugging faster and help you learn while you are building your app.

1.3. proxy.ts: The New middleware.ts

Next.js has been changing the network boundary by introducing,proxy.ts. It's going to use instead of middleware.ts and it becomes the new standard for intercepting requests on the Node.js runtime.

Migration is too simple. Just rename middleware.ts to proxy.ts, and rename the exported function to proxy.

// proxy.ts
export function proxy(req) {
  // intercept requests here
}

Note: middleware.ts is still available for Edge runtime use cases, but it is deprecated and will be removed in a future version.

1.4. Improved Logging

Logging output is improved to give more insight into performance. Development request logs and build output now show clearer details about where time is spent, with labels like Compile and Render.

2. Major Upgrades and Stable Features

This section covers features that existed before as experimental or beta. But they are now stable or significantly improved.

2.1. Turbopack Is Now Stable and the Default Bundler

A big milestone in Next.js 16 is making stable Turbopack for both development and production, and it becomes the default bundler for new Next.js projects. If you’ve ever waited for long webpack builds, you are going to experience up to 5–10× faster Fast Refresh and 2–5× faster production builds in Next.js 16.

Next.js 16 also introduces a beta feature called Turbopack File System Caching, which can speed up startup times for large projects by storing compiler artifacts between runs.

2.2. React Compiler Support Is Stable

Unnecessary re-renders are a painful part of each react app. Next.js 16 has stable built-in support for the React Compiler. The main benefit is that it can automatically memoize some parts of your app to reduce unnecessary re-renders and consequently improving performance with less manual work.

It’s not enabled by default yet, because the team is still collecting build performance data. Enabling it may increase compile times.

Get started with installing its plugin:

npm install babel-plugin-react-compiler@latest

Then enable it in your next.config.ts:

// next.config.ts
const nextConfig = {
  reactCompiler: true,
};

export default nextConfig;

2.3. Smarter Caching APIs

Next.js 16 updates caching APIs to make caching behavior more easier to control. The goal is to give you tools that match real-world needs like update content in the background and show the latest data immediately after a write.

revalidateTag()

revalidateTag() is updated and now requires a second argument: a cacheLife profile. This enables stale-while-revalidate (SWR) behavior. In simple terms, users get a fast response from cache even if it is a little old and Next.js fetches the latest data in the background for the next visitor.

// Use a built-in cacheLife profile
revalidateTag('blog-posts', 'max');

// Or use a custom revalidation time (seconds)
revalidateTag('products', { expire: 3600 });

updateTag()

updateTag() is a new API that works only in Server Actions. Its purpose is "read-your-writes". That means after a user updates something, the next read is guaranteed to show the new version. This is great for experiences like updating a profile, changing settings, or editing a post.

refresh()

refresh() is another new API designed for Server Actions. It refreshes onlyuncached data on a page and leaves cached content untouched. This is useful when you want to update a dynamic part like a notification count, inventory changes, changing crypto price, etc without re-fetching everything.

3. Important Changes for Upgrading

If you upgrade an existing project to Next.js 16, there are important breaking changes and new defaults to know about.

• The minimum required Node.js version is now 20.9+.
• Support for AMP has been completely removed.
• The next lint command is removed. You should use ESLint directly.
• If you use parallel routes, you must create an explicit default.js file for each route slot.
• There are smaller updates too, like new defaults for next/image.

If you used next lint, you can migrate scripts with this codemod:

npx @next/codemod@canary next-lint-to-eslint-cli

4. What’s Next?

This post is a high-level overview of the most important changes in Next.js 16. In the coming weeks, I will publish more detailed articles showing how to use these features with practical examples.

If you want deep dives, the best topics to explore next are Cache Components and the new caching APIs, and Turbopack performance patterns in real projects.

5. Conclusion

Next.js 16 is a landmark release focused on a faster, more intuitive, and more powerful developer experience. The stabilization of Turbopack can bring a major performance boost, and the updated caching model gives more explicit control over data freshness.

Overall, the framework is moving toward predictable behavior and clear boundaries, which helps teams build large apps with fewer surprises. If you are planning to upgrade, review the breaking changes carefully and test step by step.