Cache Components

The new "use cache" directive gives you explicit control over caching. By default, dynamic code executes at request time, which aligns with expectations for full-stack applications. This opt-in approach means you can cache pages, components, and functions more effectively.

import { cache } from "react";

const getData = cache(async () => {
  const res = await fetch("https://api.example.com/data", {
    next: { revalidate: 3600 },
  });
  return res.json();
});

export default async function Page() {
  const data = await getData();
  return <div>{/* render data */}</div>;
}

You can also use the directive directly in server components:

"use cache";

export default async function CachedComponent() {
  const data = await fetchData();
  return <div>{data}</div>;
}

Next.js DevTools MCP

Next.js 16 integrates the Model Context Protocol (MCP) into its DevTools, enabling AI-assisted debugging. Giving AI agents insights into routing, caching, and rendering behaviors, along with unified logs and automatic error access.

You can diagnose issues and receive contextual suggestions directly within your workflow. The DevTools can now understand your app’s structure and provide more relevant debugging information.

Turbopack as Default Bundler

Turbopack is now the default bundler in Next.js 16. It’s a Rust-based incremental bundler optimised for JavaScript and TypeScript that provides up to 10x faster fast refresh during development and 2–5x faster production builds.

You don’t need to configure anything - it works out of the box. If you were using Webpack before, the migration is automatic.

React Compiler Support

The React Compiler is now stable in Next.js 16. It automatically memoizes components to reduce unnecessary re-renders without manual code changes.

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

module.exports = nextConfig;

You can remove manual useMemo and useCallback calls in many cases - the compiler handles it for you.

Enhanced Routing and Navigation

Routing improvements include layout deduplication and incremental prefetching, ensuring faster and more efficient page transitions. These enhancements reduce network overhead and improve user experience without requiring code modifications.

Layouts are now automatically deduplicated, so if you have the same layout across multiple routes, it’s only rendered once. Incremental prefetching means Next.js prefetches routes more intelligently based on user behavior.

Breaking Changes

Minimum Node.js Version

Next.js 16 requires Node.js 20.9.0 (LTS) or later. Make sure you’re running a compatible version before upgrading.

Minimum TypeScript Version

TypeScript 5.1.0 or later is now required. If you’re using an older version, you’ll need to upgrade.

AMP Support Removed

Support for the deprecated AMP standard has been dropped. If you were using AMP, you’ll need to migrate to standard Next.js pages.

Middleware Renamed

The middleware.ts file has been replaced with proxy.ts for clearer network boundary definitions. If you have middleware, you’ll need to rename the file.

// middleware.ts (old)
export function middleware(request: NextRequest) {
  // ...
}

// proxy.ts (new)
export function proxy(request: NextRequest) {
  // ...
}

The functionality remains the same but the naming better reflects its purpose as a network boundary proxy.