如何从NextJS v11干净升级到v13？依赖冲突问题求解

步骤1：清理本地依赖环境 #

先彻底清除旧依赖与锁文件，避免缓存引发的版本冲突：

# macOS/Linux
rm -rf node_modules package-lock.json

# Windows
rmdir /s /q node_modules && del package-lock.json

步骤2：安装匹配的核心依赖版本 #

最新版Next.js（如13.x系列）要求React 18.2.0及以上，直接指定兼容版本组合安装，避免latest标签可能导致的临时版本不匹配：

npm install next@latest react@18.2.0 react-dom@18.2.0 eslint-config-next@latest

步骤3：排查并修复第三方依赖冲突 #

若仍出现ERESOLVE错误，说明项目中存在未兼容React 18的依赖，按以下方式处理：

• 用npm explain <冲突包名>定位冲突来源，确认是哪个依赖仍要求React 17.x
• 升级该依赖到支持React 18的版本，例如：
  • 类型依赖：npm install @types/react@latest @types/react-dom@latest
  • ESLint插件：将eslint-plugin-react升级到^7.30.0+版本
  • 测试工具：react-testing-library需升级到^13.0.0+

步骤4：验证升级结果 #

• 运行npm audit确认高危漏洞已全部修复
• 启动开发服务器npm run dev，检查运行时问题：
  • React 18的StrictMode会触发副作用两次，需调整代码中依赖单次执行的逻辑
  • Next.js 13中next/link组件无需嵌套<a>标签，需修改对应代码
  • 检查是否使用了废弃API（如next/config的旧用法），按官方文档替换为新API

关键注意事项 #

跨大版本升级时需关注Next.js的兼容性变更：

• Next.js 12引入SWC编译器，需检查自定义Babel配置是否兼容
• Next.js 13的App Router为可选特性，若继续使用Pages Router，大部分代码可兼容，但需留意路由API的细微调整

内容的提问来源于stack exchange，提问作者Steverino