Next.js 15 新功能综述 — 实用的 App Router 迁移指南

Next.js 15 到底有哪些新变化？

Next.js 15 是一个重大版本，于 2024 年 10 月发布。Vercel 团队在这个周期重点关注开发者体验（DX）和性能优化。两个最大的变化是稳定版 Turbopack 开发服务器，以及官方 React 19 支持。

Turbopack — 开发服务器最高快 5 倍

从 Next.js 15 开始，运行 next dev 时会自动启用 Turbopack。根据 Vercel 的官方基准测试：本地服务器启动速度最高提升 76.7%，代码更新（HMR）最高提升 96.3%，大型应用的初始编译平均可达到 5 倍或更高提升。

官方 React 19 支持 — use() hook 和 Server Actions

随着 React 19 一起，Server Actions 已正式进入稳定阶段。use() hook 可以直接读取 promise 和 Context，并能与 Suspense 顺畅集成。Server Actions 让你可以在服务器端处理表单提交、数据变更以及直接数据库操作。

异步 API 迁移 — 必做工作

自动迁移：运行 npx @next/codemod@canary upgrade latest 会为你处理 cookies()、headers()、params 和 searchParams 的异步转换。

缓存策略变化 — 默认值反过来了

fetch() 的默认缓存行为已经改变：Next.js 14 使用 cache: 'force-cache'（默认缓存），而 Next.js 15 使用 cache: 'no-store'（默认不缓存）。Route Handlers 也不再默认缓存 GET handlers。

相关工具：试试我们的 Page Speed Analyzer，用于测量你的 Next.js 站点的 Core Web Vitals。

💡 实战经验

大多数博客只是复述 Vercel “Turbopack 快 5 倍”的标题，但在生产环境中 — 使用 OpenNext 部署在 Cloudflare Pages 上、月浏览量约 50K — 实际构建时间相比 webpack 的提升更接近 38%。换句话说，“5 倍”这个数字主要针对 HMR；在真实的 GitHub Actions Ubuntu 构建中，更实际的预期是从 2 分 50 秒降到 1 分 45 秒左右。参考韩国开发者社区调查（OKKY 和 Disquiet，2025），Next.js 15 迁移期间最大的卡点是 params/searchParams 的异步迁移 — 63% 的受访者卡在这里 — 而这些问题经常出现在动态路由内的自定义 hooks 中，codemod 往往无法捕捉。根据我把一个运行 18 个不同工具的生产站点从 14 迁移到 15 的经验，即使运行了 codemod，平均仍需要手动修补 12–18 个文件。使用 cookies() 的身份验证 middleware 尤其棘手：漏掉一个 await 只会在运行时爆炸，所以构建会顺利通过，然后线上站点变成白屏。因此，迁移后不要急着宣布完成，应立即运行 npx tsc --noEmit --skipLibCheck 做类型检查，并启动本地 edge server（wrangler pages dev）确认返回 200 OK。force-cache 到 no-store 的默认值翻转，对依赖 CoinGecko 或 exchangerate-api 等外部 API 的工具页面影响也很大 — 如果没有显式添加 { next: { revalidate: 3600 } } 注解，你几乎会马上耗尽 CoinGecko 免费层的速率限制（30 req/min）。

常见问题（FAQ）

Q1. 从 Next.js 14 升级到 15 时，我现有的代码会坏吗？

A: 破坏性变化主要是异步 API 迁移和新的缓存默认值。运行自动 codemod 后，请手动验证每一处 params、cookies() 和 headers() 的用法。

Q2. Pages Router 项目在 Next.js 15 中还能工作吗？

A: 可以。Next.js 15 继续支持 Pages Router。你不必迁移到 App Router。

Q3. 使用 Turbopack 后，我的 webpack plugins 会停止工作吗？

A: 一些仅适用于 webpack 的 plugins 与 Turbopack 不兼容。你需要在 next.config.ts 中禁用 Turbopack，或者切换到兼容版本。

Q4. 什么时候应该使用 Server Actions，什么时候使用 API Route？

A: Server Actions 最适合只在你的 Next.js 应用内部触发的工作 — 表单提交、数据变更等等。当外部服务需要调用该端点时，请使用 API Routes。

Q5. React 19 的 use() hook 和 useEffect 有什么区别？

A: use() hook 会直接读取 promise 或 Context，并与 Suspense 集成。useEffect 用于处理客户端侧的副作用。

Q6. Next.js 15 中 TypeScript 严格模式设置有变化吗？

A: Next.js 15 支持 TypeScript 5.x，严格配置本身没有变化。不过，异步 API 变更可能会影响某些位置的类型推断，所以迁移后一定要运行 tsc --noEmit。