关于 next-upgrade
用于依据官方迁移指南升级现有 Next.js 项目的技能,涵盖 codemod、依赖更新和构建检查,适合维护 Next.js 应用的开发者。
主要功能
- 01检测当前 Next.js 及相关依赖
- 02选择对应版本的迁移步骤
- 03运行 codemod 处理破坏性变更
- 04更新 Next.js 和同级依赖
- 05检查构建与关键功能
适用场景
- 01规划跨多个主版本的渐进升级
- 02在手动迁移前应用自动转换
- 03依赖更新后检查项目
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ connorads/ dotfiles --skill next-upgrade安装后在 Claude Code 中输入/next-upgrade确认已加载。
详细介绍
升级 Next.js
按照官方迁移指南,将当前项目升级到最新版本的 Next.js。
说明
-
检测当前版本:读取
package.json,确定当前 Next.js 版本及相关依赖项(React、React DOM 等) -
获取最新升级指南:使用 WebFetch 获取官方升级文档:
-
确定升级路径:根据当前版本确定适用的迁移步骤。跨越多个主版本时,请逐步升级(例如,13 → 14 → 15)。
-
先运行 codemods:Next.js 提供 codemods,可自动处理破坏性变更:
npx @next/codemod@latest <transform> <path>常见转换:
next-async-request-api- 更新异步 Request API(v15)next-request-geo-ip- 迁移 geo/ip 属性(v15)next-dynamic-access-named-export- 转换动态导入(v15)
-
更新依赖项:同时升级 Next.js 和对等依赖项:
npm install next@latest react@latest react-dom@latest -
检查破坏性变更:查看升级指南,了解需要手动进行的更改:
- API 变更(例如,v15 中的异步 params)
next.config.js中的配置变更- 将被移除的弃用功能
-
更新 TypeScript 类型(如适用):
npm install @types/react@latest @types/react-dom@latest -
测试升级:
- 运行
npm run build,检查构建错误 - 运行
npm run dev并测试关键功能
- 运行
评论
支持 Markdown