Menu
Upgrade Next.js to the latest version following official migration guides and codemods
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel/framework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, Blueprints, and framework integrations such as Next.js, Nuxt, Astro, Remix, SvelteKit, Angular, Hydrogen, and the App SDK. Use this skill whenever working with Sanity schemas, defineType or defineField, GROQ or defineQuery, content modeling, Presentation or preview setups, Sanity-powered frontend integrations, Sanity Functions, documentEventHandler, defineDocumentFunction, defineMediaLibraryAssetFunction, @sanity/functions, @sanity/blueprints, sanity.blueprint.ts, event-driven content automation, or when reviewing and fixing a Sanity codebase.
| name | next-upgrade |
| description | Upgrade Next.js to the latest version following official migration guides and codemods |
| argument-hint | [target-version] |
Upgrade the current project to the requested Next.js version following official migration guides.
Detect current version: Read package.json to identify the current Next.js version and related dependencies (React, React DOM, etc.)
Fetch the latest upgrade guide: Fetch the official upgrade documentation from these URLs:
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, using the exact [target-version] passed by the user for the current step. If no target version was provided, use the next incremental version identified in Step 3 instead of jumping straight to latest. Determine <supported-react-version> from the official upgrade guide for that target Next.js version, since React and React DOM peer requirements can change between releases:
npm install next@<target-version> react@<supported-react-version> react-dom@<supported-react-version>
Review breaking changes: Check the upgrade guide for manual changes needed:
next.config.jsUpdate TypeScript types (if applicable):
npm install @types/react@latest @types/react-dom@latest
Test the upgrade:
npm run build to check for build errorsnpm run dev and test key functionality