Next.js 15: What's New and How to Upgrade

1. React 19 Support

Next.js 15 is built on React 19, bringing all the latest React features to your Next.js applications. React 19 introduces the React Compiler, Actions, improved hydration, and better error handling. These features work seamlessly with Next.js to provide an unparalleled development experience.

// Server Component with React 19
async function ServerComponent() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  
  return <div>{json.title}</div>;
}

2. Async Request APIs

One of the most significant changes in Next.js 15 is the introduction of async request APIs. Headers, cookies, and params are now accessed asynchronously, aligning with React's async model and enabling better streaming and performance.

import { headers, cookies } from 'next/headers';

export default async function Page() {
  // Access headers asynchronously
  const headersList = await headers();
  const userAgent = headersList.get('user-agent');
  
  // Access cookies asynchronously  
  const cookieStore = await cookies();
  const theme = cookieStore.get('theme');
  
  return <div>User Agent: {userAgent}</div>;
}

3. Enhanced Caching Strategy

Next.js 15 introduces a more intuitive caching system. By default, fetch requests are no longer cached automatically - giving you explicit control over when and how data is cached. This prevents unexpected stale data issues and makes the caching behavior more predictable.

// Cached fetch request
const data = await fetch('https://api.example.com/data', {
  cache: 'force-cache', // Explicit caching
  next: { revalidate: 3600 } // Revalidate every hour
});

// No cache (default in Next.js 15)
const liveData = await fetch('https://api.example.com/live', {
  cache: 'no-store' // Always fresh
});

4. Turbopack Dev - Production Ready

Turbopack, the Rust-powered successor to Webpack, is now stable for development in Next.js 15. It delivers dramatically faster builds and hot module replacement (HMR), making your development experience significantly smoother. Early benchmarks show 10x faster updates compared to Webpack in large applications.

5. Improved Image Component

The next/image component gets better with faster loading, improved placeholder support, and better optimization for modern image formats like AVIF. Automatic format detection ensures your users get the best possible image experience.

Upgrading from Next.js 14

Next.js 15 includes some breaking changes, primarily around the async request APIs. Here's what you need to know to migrate your existing applications smoothly:

• Async Headers & Cookies: The headers() and cookies() functions now return Promises. You'll need to add await when using them in Server Components.
• Fetch Caching Default: Fetch requests are no longer cached by default. Add cache: 'force-cache' explicitly if you want caching behavior.
• Route Segment Config: Some route segment config options have been renamed or deprecated. Check the migration guide for specifics.

Step 1: Update Dependencies

npm install next@latest react@latest react-dom@latest
# or
yarn add next@latest react@latest react-dom@latest
# or  
pnpm add next@latest react@latest react-dom@latest

Step 2: Update Async APIs

Add await to headers(), cookies(), and params usage throughout your codebase. Use codemod for automated migration.

Step 3: Review Caching

Explicitly add cache: 'force-cache' to fetch requests that should be cached. Review your data fetching strategy.

Step 4: Test Thoroughly

Run your application locally with Turbopack (next dev --turbo), test all features, and run your test suite before deploying.