mcpField
N
next-upgrade

next-upgrade

github.com/midudev开发7.0k59 次安装2 周前更新
代码仓库

关于 next-upgrade

用于将现有 Next.js 项目升级到最新版本的技能,依据官方迁移指南识别版本相关步骤,并指导开发者应用 codemod、更新依赖和测试结果。

主要功能

  1. 01检测 Next.js 及相关依赖版本
  2. 02查找官方版本升级指南
  3. 03规划跨主版本的分步升级
  4. 04先应用 codemod 再处理手动迁移
  5. 05更新依赖与 TypeScript 类型
  6. 06检查构建和开发服务器

适用场景

  1. 01跨 Next.js 主版本升级项目
  2. 02查找 API 与配置变更的迁移步骤
  3. 03通过构建和开发环境检查升级结果

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/midudev/autoskills --skill next-upgrade

安装后在 Claude Code 中输入/next-upgrade确认已加载。

详细介绍

升级 Next.js

按照官方迁移指南,将当前项目升级到最新版本的 Next.js。

说明

  1. 检测当前版本:读取 package.json,确定当前 Next.js 版本及相关依赖项(React、React DOM 等)

  2. 获取最新升级指南:使用 WebFetch 获取官方升级文档:

  3. 确定升级路径:根据当前版本确定适用的迁移步骤。跨越多个主版本时,请逐步升级(例如,13 → 14 → 15)。

  4. 先运行 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)
  5. 更新依赖项:同时升级 Next.js 和对等依赖项:

    npm install next@latest react@latest react-dom@latest
    
  6. 检查破坏性变更:查看升级指南,了解需要手动进行的更改:

    • API 变更(例如,v15 中的异步 params)
    • next.config.js 中的配置变更
    • 将被移除的弃用功能
  7. 更新 TypeScript 类型(如适用):

    npm install @types/react@latest @types/react-dom@latest
    
  8. 测试升级:

    • 运行 npm run build,检查构建错误
    • 运行 npm run dev 并测试关键功能

评论

支持 Markdown