next-upgrade
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:
More from vercel-labs/openreview
next-cache-components
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
30vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
30web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
29vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with
28next-best-practices
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
27vercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use
22