← Back to blogs
Digital Engineering

Next.js 15 — What Changed and What Every Developer Building with Next.js Needs to Know

JUN 22, 2026•7 MIN READ•Project Supply Team
Next.js 15 — What Changed and What Every Developer Building with Next.js Needs to Know

Next.js 15 represents a pivotal evolution in the framework’s history, marking a shift toward more explicit, predictable, and performant web development. By embracing React 19, overhauling caching defaults, and introducing robust new APIs, this release forces developers to move away from "magic" behavior toward a more intentional architecture.

To understand why this matters, we must look at the framework not just as a set of features, but as a change in philosophy. Below is an exhaustive breakdown of what changed, how it affects your development workflow, and why these shifts were necessary.

1. The Paradigm Shift: From Magic to Explicit

In previous versions (particularly the transition from 13 to 14), Next.js relied on "aggressive" default behaviors. Caching, for instance, was enabled by default, often leading to stale data bugs that were notoriously difficult to debug. Next.js 15 flips this narrative.

The Core Philosophy Change

  • Dynamic by Default: In Next.js 15, fetch requests and GET Route Handlers are no longer cached automatically.
  • Intentional Caching: You must now explicitly opt into caching. This reduces the cognitive load of having to "fight" the framework to get fresh data.
  • Predictability: By forcing developers to define their caching strategy, the framework ensures that your production environment behaves exactly as you intended during local development.

2. React 19 Integration: The Engine Upgrade

Next.js 15 is built on top of React 19, bringing substantial changes to how components render and manage state.

The React Compiler

One of the most significant features is the React Compiler (formerly known as "React Forget").

  • What it does: It automatically memoizes your components and hooks.
  • The Impact: You can largely stop using useMemo and useCallback for performance optimization. The compiler analyzes your code and optimizes it automatically, reducing the bundle size and increasing runtime speed.
  • Developer Experience: This results in cleaner, more readable code with significantly less boilerplate.

The use() Hook

React 19 introduces the use API, which simplifies asynchronous data fetching within components. It allows you to read resources (like Promises or Context) directly inside the render cycle, bridging the gap between standard React and asynchronous server components.

3. Caching & Data Fetching Overhaul

For many developers, the biggest "breaking change" in Next.js 15 is the removal of default caching for fetch.

Comparing Caching Philosophies

FeatureNext.js 14 BehaviorNext.js 15 Behavior
Fetch RequestsCached by default (force-cache)Not cached by default (no-store)
GET Route HandlersCached by defaultNot cached by default
Cache Opt-inManual no-store requiredExplicit force-cache or config
DebuggingOften hidden/obscureTransparent and explicit

How to adapt your code

If you want to maintain the "fast" static behavior of previous versions, you now must explicitly state it:

JavaScript

// Next.js 15 explicit static fetch
const data = await fetch('https://api.example.com', { cache: 'force-cache' });

This move toward explicit declarations makes it much harder to accidentally serve stale data to users, which is a massive win for reliability in large-scale enterprise applications.

4. Performance: Turbopack & Partial Prerendering (PPR)

Next.js 15 continues to optimize the build and development cycle.

The Rise of Turbopack

Turbopack is the successor to Webpack, built from the ground up in Rust. While Webpack served the community well, it struggled to scale with the massive dependency graphs of modern web applications.

  • Local Development: You will notice significantly faster startup times.
  • HMR (Hot Module Replacement): The speed of code updates during development is nearly instantaneous compared to previous iterations.

Partial Prerendering (PPR)

PPR is arguably the most important feature for performance-focused developers. It allows you to combine the speed of static rendering with the interactivity of dynamic rendering.

  • Static Shell: The page structure and non-dynamic content are rendered at build time and served instantly.
  • Dynamic Holes: Dynamic parts of the page (like a personalized user dashboard or a shopping cart) are streamed to the browser using Suspense boundaries.
  • Result: You get the SEO benefits and speed of a static site with the functional richness of a fully dynamic application.

5. Major API Changes & Breaking Changes

The move to React 19 and the maturation of the App Router necessitated some breaking changes.

Async Request APIs

Previously, APIs like cookies(), headers(), and params (in dynamic routes) were accessed synchronously. In Next.js 15, these have become asynchronous.

Before (v14):

JavaScript

const cookieStore = cookies();
const token = cookieStore.get('token');

After (v15):

JavaScript

const cookieStore = await cookies();
const token = cookieStore.get('token');

Note: This change is widespread. The Next.js CLI provides an automated codemod to help migrate your codebase, but developers should plan for a thorough audit of their data-fetching logic.

Hydration Error Overhaul

Hydration errors—the bane of many React developers—have been completely redesigned. Next.js 15 provides much clearer, more readable error messages, pinpointing exactly which component caused the mismatch between server-side HTML and client-side state.

6. Developer Experience: The "Everything as Code" Shift

Next.js 15 further cements the framework's commitment to Type safety and configuration as code.

TypeScript Config

You can now use next.config.ts instead of next.config.js. This provides built-in type checking for your configuration, preventing runtime errors that were previously common when misconfiguring your framework.

Server Actions

Server Actions are now fully stable and better integrated. They eliminate the need for traditional API routes for basic form submissions. By defining an action directly in your server-side component, you can perform database mutations without exposing a public API endpoint.

7. Migration Checklist for Teams

Upgrading a large codebase to Next.js 15 should not be taken lightly. Follow this strategic approach:

  1. Dependency Alignment: Ensure all your critical dependencies are compatible with React 19.
  2. Run the Codemod: Use npx @next/codemod@latest to automate the transition to the new Async Request APIs.
  3. Audit Caching: Review every instance of fetch in your codebase. Decide whether each instance needs to be static or dynamic.
  4. Component Boundaries: Verify that your use client directives are placed correctly. Next.js 15 is stricter about component boundary enforcement.
  5. Test Hydration: Because hydration errors are now more visible, expect to find "bugs" that were previously silently ignored. Treat these as technical debt being cleaned up.

8. Summary Table: Next.js 14 vs. 15

AspectNext.js 14Next.js 15
BundlerWebpack (Default)Turbopack (Optimized)
React Version1819
Caching DefaultAggressive (Cached)Explicit (Dynamic)
Request APIsSynchronousAsynchronous
Config Filenext.config.jsnext.config.ts (Supported)
Form MutationsManual API routes/ActionsStable Server Actions

Why You Should Care

Next.js 15 is not just another minor update; it is an opinionated framework pushing the industry toward a specific architecture: Server-First.

By forcing developers to be explicit about caching, streamlining data fetching through the use hook, and automating performance optimizations via the React Compiler, Next.js 15 reduces the likelihood of "hidden" bugs and improves the maintainability of large applications.

For the developer building in 2026, this is a breath of fresh air. It requires a steeper learning curve initially to grasp the async APIs and caching changes, but the payoff is a significantly more robust, performant, and predictable application.

If you are starting a new project, start with Next.js 15. If you are migrating an existing project, do it incrementally—start by updating to React 19, then tackle the async API migrations, and finally, audit your caching strategy. The end result will be a cleaner codebase that is better equipped to handle the demands of modern, highly interactive web applications.

Understanding the Change: A Final Thought

The industry has spent years dealing with the complexity of SPA (Single Page Application) hydration and the unpredictability of "magic" caching. Next.js 15 is the framework’s response to these challenges. By opting into explicit control, you are choosing stability over convenience—a trade-off that every professional developer should be happy to make as their projects scale.

To truly master this version, I recommend focusing on three key areas:

  1. The new Cache Life API—learn how to manage revalidation intervals effectively.
  2. Server Actions—replace your legacy API routes with these to reduce your server footprint.
  3. Partial Prerendering (PPR)—experiment with this to see how it can solve your largest performance bottlenecks.

FAQs

The previous default of caching everything by default was the source of significant confusion, as developers often found it difficult to understand why their data was not updating. By making it uncached by default, Next.js forces developers to be explicit about their data-fetching requirements. This shift moves the framework away from "magic" defaults and toward a more predictable, transparent architecture where caching is a conscious performance choice rather than a hidden behavior.

Use the official @next/codemod tools provided by Vercel. These tools are designed to identify every instance where you are accessing synchronous request APIs like cookies or params and automatically wrap them in await calls. While you should still manually verify the changes, the codemods cover the vast majority of cases, significantly reducing the burden of the migration.

While technically optional, the React Compiler is highly recommended for any complex or data-heavy application. It automatically applies memoization to your components, effectively doing the work that developers used to do manually with useMemo and useCallback. This not only leads to cleaner, more readable code but also optimizes performance in ways that are often difficult to achieve manually, reducing the risk of unnecessary re-renders.

next/form enhances the standard HTML form by providing client-side navigation capabilities and seamless integration with Server Actions. It brings the power of "progressive enhancement" to your forms, ensuring they work perfectly even before the JavaScript bundle has fully loaded on the client. It’s a significant upgrade that simplifies form handling while maintaining a standard, accessible web experience.

While Next.js 15 is built for React 19, the framework maintains backward compatibility with React 18 for users who may have complex dependencies that prevent an immediate move to React 19. However, the recommended path is to move to React 19 as soon as possible to leverage the full performance benefits and the improved compiler support that defines the Next.js 15 experience.

The biggest shift in Page segments is that they are no longer reused from the Client Router Cache by default, with a staleTime of 0. This means every navigation will now fetch fresh data. If you have specific parts of your app where you prefer the previous behavior of keeping the page in the cache, you can explicitly configure this using the staleTimes setting in your next.config.ts, giving you full control over your client-side navigation performance.

Tags
Digital EngineeringArtificial Intelligence
LET'S WORK TOGETHER

Have a project in mind?Let's make it real.

Tell us what you're building. We'll bring the design, technology, and thinking to make it happen.

Fill up the following form to start a conversation with our team