Next.js 15 is officially released, built on React 19 stable. This major update brings a stable Partial Prerendering (PPR) system, a revamped caching strategy, and Turbopack integration for development builds.

This article walks through the key new features and provides a step-by-step upgrade guide for migrating from Next.js 14.

1. Key New 功能

Native React 19 Support

Next.js 15 fully embraces React 19. Server Components are now stable, and new hooks like use() and useOptimistic() work directly within the App Router. Server Actions are also more efficient with improved performance for action-oriented hooks.

Partial Prerendering (PPR) Goes Stable

Previously experimental, PPR is now production-ready. It allows you to mix dynamic and static content within the same page — user-specific data is rendered dynamically while shared content is pre-rendered at build time. This hybrid approach directly improves LCP and FCP metrics for blogs and e-commerce sites.

Turbopack as the Default Development Engine

Turbopack is now the default bundler for next dev in new projects. Written in Rust, it delivers substantially faster Hot Module Replacement (HMR) compared to the legacy webpack-based dev server. Large-scale projects will notice the speed improvement immediately.

2. Upgrade Steps

步骤 1: Update Dependencies

Run the following in your project root:

npm install next@15 react@19 react-dom@19

步骤 2: Replace Deprecated APIs

Several next.config.js options from version 14 have changed. Pay close attention to caching configuration — the staleTimes option has been extended for finer-grained cache control.

步骤 3: Migrate to Built-in Font System

If you are still using the @next/font package, switch to the built-in next/font:

npm uninstall @next/font

Update all imports in your code to reference next/font instead.

3. Caching Strategy Overhaul

In Next.js 15, the default cache behavior for fetch is now no-store. This prevents unintended stale data from lingering in the cache. If you need caching, explicitly pass cache: 'force-cache':

// Next.js 15 default: no cache
const data = await fetch('https://api.example.com/data');

// Explicitly opt into caching
const cachedData = await fetch('https://api.example.com/data', {
  cache: 'force-cache',
});

摘要

Next.js 15 represents a significant leap in both performance and developer experience, anchored by React 19 integration. With PPR stabilized and Turbopack as the default dev engine, production adoption is more accessible than ever. Pay attention to the new caching defaults and plan your migration accordingly.