next-upgrade
Upgrade Next.js to the latest version following official migration guides and codemods
Best use case
next-upgrade is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Upgrade Next.js to the latest version following official migration guides and codemods
Teams using next-upgrade should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/next-upgrade/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How next-upgrade Compares
| Feature / Agent | next-upgrade | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Upgrade Next.js to the latest version following official migration guides and codemods
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Upgrade Next.js
Upgrade the current project to the latest Next.js version following official migration guides.
## Instructions
1. **Detect current version**: Read `package.json` to identify the current Next.js version and related dependencies (React, React DOM, etc.)
2. **Fetch the latest upgrade guide**: Use WebFetch to get the official upgrade documentation:
- Codemods: https://nextjs.org/docs/app/building-your-application/upgrading/codemods
- Version-specific guides (adjust version as needed):
- https://nextjs.org/docs/app/building-your-application/upgrading/version-15
- https://nextjs.org/docs/app/building-your-application/upgrading/version-14
3. **Determine upgrade path**: Based on current version, identify which migration steps apply. For major version jumps, upgrade incrementally (e.g., 13 → 14 → 15).
4. **Run codemods first**: Next.js provides codemods to automate breaking changes:
```bash
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)
5. **Update dependencies**: Upgrade Next.js and peer dependencies together:
```bash
npm install next@latest react@latest react-dom@latest
```
6. **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
7. **Update TypeScript types** (if applicable):
```bash
npm install @types/react@latest @types/react-dom@latest
```
8. **Test the upgrade**:
- Run `npm run build` to check for build errors
- Run `npm run dev` and test key functionalityRelated Skills
upgrade-packages-js
Safely upgrade JavaScript packages with breaking change detection, migration guidance, and automated code migrations (npm/pnpm/yarn). Cross-platform with git safety branch enforcement.
nextjs-senior-dev
Senior Next.js 15+/16 Engineer skill for App Router. Use when scaffolding production apps, enforcing RSC patterns, auditing codebases, or optimizing performance.
next-cache-components
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
web-quality
Web quality optimization skills based on Google Lighthouse guidelines and Core Web Vitals. Use when asked to audit web quality, optimize performance, improve accessibility, fix SEO, apply best practices, or analyze Core Web Vitals (LCP, INP, CLS).
vercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
uiux-toolkit
Comprehensive UX/UI evaluation meta-skill combining design theory and UX methodology. Use when conducting UI/UX audits, visual design reviews, accessibility compliance (WCAG 2.2), user flow analysis, responsive testing, interaction design evaluation, or design system audits. Evaluates using Nielsen's heuristics, Gestalt principles, typography theory, color theory, and modern methodologies (OOUX, JTBD, Cognitive Walkthrough).
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
trailofbits-security
Security-focused static analysis and code auditing skills from Trail of Bits. Includes CodeQL deep analysis, Semgrep scanning, and SARIF result processing. Use when performing security audits, running static analysis, scanning for vulnerabilities, or processing scan results.
token-optimizer
Reduce token count in prompts, docs, and prose. Covers prompt compression (40-60% savings), doc formatting, TOON data serialization, and Strunk's prose clarity rules. Use when compressing prompts, optimizing docs for LLM context, or writing clear technical prose.
testing-automation-expert
Production-grade testing strategies for robust, maintainable systems. Covers unit/integration/E2E testing, contract testing, accessibility, mutation testing, and CI/CD patterns. Supports Python (pytest) and TypeScript (Jest/Vitest/Playwright).
test-levels
This skill explains the 3 test levels (Unit, Integration, E2E) using the "Building a Car" analogy and provides guidance on when to use each type. Includes project-specific Playwright examples.