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-intl: pnpm i next-intl@latest
- 在 .gitignore 最后追加一行:
.pnpm-store
最后删除 .next 目录并重新启动开发服务器:
npm run dev
现在你已经在使用 Next.js 16 了。
总结
我已经在自己的几个项目中使用 Next.js 16 超过一个月,整体运行平稳,唯一的变化就是开发体验明显更流畅了。因此,我也顺带把 NEXTY.DEV 升级到了 Next.js 16。
