vercel-labs avatar
717
vercel-labs

This skill automates upgrading Next.js projects to the latest version by detecting the current setup, fetching official migration guides, applying codemods for breaking changes, and updating dependencies. It is designed for developers seeking to streamline the complex upgrade process while ensuring compatibility and adherence to best practices. The skill simplifies manual tasks such as reviewing breaking changes, updating TypeScript types, and testing the upgrade, making it suitable for Next.js users of all experience levels.

npx skills add https://github.com/vercel-labs/next-skills --skill next-upgrade

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:
  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: 
    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: 
    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): 
    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 functionality

GitHub Owner

Owner: vercel-labs

GitHub Links

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

  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:
  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: 
    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: 
    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): 
    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 functionality

More skills

M
React Doctor

millionco

S
Shadcn

shadcn

G
Gws Drive

googleworkspace