作为React生态中最流行的全栈框架，Next.js每次版本更新都牵动着无数开发者的心。Next.js 15带来了自App Router推出以来最重要的变化——全面拥抱React 19，同时对多个核心API进行了异步化改造。这些变化不仅影响着代码的编写方式，更深刻改变了我们对服务端渲染的认知。
本文将基于官方文档，系统性地解析Next.js 15的所有重要变化。无论你是正在考虑升级的现有项目开发者，还是准备学习Next.js的新人，这篇文章都将帮助你全面理解新版本的特性和升级策略。
# 升级准备工作
# 环境要求
在升级到Next.js 15之前，需要确保你的开发环境满足以下要求：
- Node.js 18.17.0 或更高版本
- 如果使用TypeScript，需要安装最新的
@types/react和@types/react-dom - 建议使用pnpm 8+、npm 10+或yarn 1.22+
# 一键升级
Next.js官方提供了Codemod工具，可以自动完成大部分迁移工作。在项目根目录下运行以下命令：
# 使用pnpm
pnpm dlx @next/codemod@canary upgrade latest
# 使用npm
npx @next/codemod@canary upgrade latest
# 使用yarn
yarn dlx @next/codemod@canary upgrade latest
# 使用bun
bunx @next/codemod@canary upgrade latest
@前端进阶之旅: 代码已经复制到剪贴板
# 手动升级
如果你 prefer 手动升级，需要同时更新Next.js和React相关依赖：
# pnpm
pnpm add next@latest react@latest react-dom@latest eslint-config-next@latest
# npm
npm install next@latest react@latest react-dom@latest eslint-config-next@latest
# yarn
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
@前端进阶之旅: 代码已经复制到剪贴板
注意：如果遇到peer dependencies警告，可能需要手动指定React版本或使用
--force/--legacy-peer-deps参数。这在Next.js 15和React 19正式稳定后将不再需要。
# React 19全面支持
# 版本要求
Next.js 15要求React和ReactDom的最低版本为19。这意味着你可以直接使用React 19带来的所有新特性，包括：
- useActionState：取代原来的useFormState，提供更强大的表单状态管理能力
- useFormStatus增强：新增
data、method、action等属性 - Actions：支持在服务端定义可调用函数
# useFormState迁移到useActionState
useFormState已被useActionState替代，虽然前者仍然可用，但已标记为废弃。useActionState提供了更丰富的API，包括直接读取pending状态的能力：
import { useActionState } from 'react'
async function submitForm(prevState, formData) {
// 表单提交逻辑
const result = await fetch('/api/submit', {
body: formData
})
return result.json()
}
export default function Form() {
const [state, submitAction, isPending] = useActionState
