next-upgrade
指导用户将Next.js项目升级到最新版本,确保利用最新功能和性能优化,提升开发效率。
npx skills add vercel-labs/next-skills --skill next-upgradeBefore / After 效果对比
1 组升级Next.js项目时,常遇到依赖冲突、配置变更和兼容性问题,导致升级过程复杂且耗时,影响开发进度。
提供Next.js项目升级的详细指导,涵盖依赖处理和常见问题解决方案。显著简化升级流程,确保项目平稳过渡到新版本。
description SKILL.md
name: next-upgrade description: Upgrade Next.js to the latest version following official migration guides and codemods argument-hint: "[target-version]"
Upgrade Next.js
Upgrade the current project to the latest Next.js version following official migration guides.
Instructions
-
Detect current version: Read
package.jsonto identify the current Next.js version and related dependencies (React, React DOM, etc.) -
Fetch the latest upgrade guide: Use WebFetch to get the official upgrade documentation:
- Codemods: https://nextjs.org/docs/app/guides/upgrading/codemods
- Version-specific guides (adjust version as needed):
-
Determine upgrade path: Based on current version, identify which migration steps apply. For major version jumps, upgrade incrementally (e.g., 13 → 14 → 15).
-
Run codemods first: Next.js provides codemods to automate breaking changes:
npx @next/codemod@latest <transform> <path>Common transforms:
next-async-request-api- Updates async Request APIs (v15)next-request-geo-ip- Migrates geo/ip properties (v15)next-dynamic-access-named-export- Transforms dynamic imports (v15)
-
Update dependencies: Upgrade Next.js and peer dependencies together:
npm install next@latest react@latest react-dom@latest -
Review breaking changes: Check the upgrade guide for manual changes needed:
- API changes (e.g., async params in v15)
- Configuration changes in
next.config.js - Deprecated features being removed
-
Update TypeScript types (if applicable):
npm install @types/react@latest @types/react-dom@latest -
Test the upgrade:
- Run
npm run buildto check for build errors - Run
npm run devand test key functionality
- Run
forum用户评价 (0)
发表评价
暂无评价,来写第一条吧
统计数据
用户评分
为此 Skill 评分