如何把 Next.js 15 项目升级到 Next.js 16

December 5, 2025
如何把 Next.js 15 项目升级到 Next.js 16
升级 Next.js 16 已经是一个值得做的决定。有了 `next-devtools-mcp`和这篇步骤指导,整个升级流程变得异常轻松。
Next.js Techniques

Next.js 16 发布已经有一段时间,我把自己的多个线上产品和个人项目都升级了一遍,很顺利,没有遇到明显问题。现在我已经非常推荐大家升级。

最大的收益是开发体验速度大幅提升。官方给出的性能改善是:5–10 倍更快的 Fast Refresh 和 2–5 倍更快的构建速度。

升级步骤

因为 Next.js 团队推出了 next-devtools-mcp,升级的大多数工作都能让 Agent 自动完成。下面是完整流程。

Step 1:配置 MCP Client

按照你的开发工具进行 MCP 配置:

  • Cursor:进入 Cursor Settings → MCP → New MCP Server 添加:

    {
      "mcpServers": {
        "next-devtools": {
          "command": "npx",
          "args": ["-y", "next-devtools-mcp@latest"]
        }
      }
    }
    
  • Claude Code: claude mcp add next-devtools npx next-devtools-mcp@latest

  • Codex: codex mcp add next-devtools -- npx next-devtools-mcp@latest

  • Gemini CLI: gemini mcp add -s user next-devtools npx next-devtools-mcp@latest

如果你使用其他工具,可以到 next-devtools-mcp 查看配置方法。

Step 2:让 Agent 自动升级

在你的开发工具中进入 Agent 模式,输入:

Next Devtools, help me upgrade my Next.js app to version 16

它会自动处理大部分升级内容。

Step 3:确认 Next.js 和 React 版本已正确升级

Agent 通常会处理 Next.js 与 ESLint,但 React 版本不会自动升级,所以你需要手动执行:

pnpm i react@latest react-dom@latest @types/react@latest @types/react-dom@latest

Step 4:其他需要调整的内容

  • 升级 next-intlpnpm i next-intl@latest
  • .gitignore 最后追加一行:
.pnpm-store

最后删除 .next 目录并重新启动开发服务器:

npm run dev

现在你已经在使用 Next.js 16 了。

总结

我已经在自己的几个项目中使用 Next.js 16 超过一个月,整体运行平稳,唯一的变化就是开发体验明显更流畅了。因此,我也顺带把 NEXTY.DEV 升级到了 Next.js 16。