>_SkillsHub▋

> nextjs-upgrade

Next.js version migrations using official guides and codemods. Use when migrating a Next.js project to a new major version using codemods. (triggers: package.json, next upgrade, migration guide, codemod)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/nextjs-upgrade?format=md"
SKILL.md•nextjs-upgrade

Next.js Upgrade Protocol

Automated and manual migration steps for Next.js version upgrades (e.g., v14 → v15).

Priority: P1 (OPERATIONAL)

1. Detection & Planning

  • Check package.json for current next, react, and react-dom versions.
  • Incremental Upgrades: Jumps across multiple major versions (e.g., 13 → 15) MUST be done incrementally (13 → 14 then 14 → 15).

2. Automated Codemods

Run Next.js codemods to handle breaking syntax changes:

npx @next/codemod@latest <transform> <path>

Common Transforms (v15):

  • next-async-request-api: Transforms params, searchParams, cookies(), and headers() into awaited Promises.
  • next-request-geo-ip: Migrates legacy geo/ip properties.
  • next-dynamic-access-named-export: Fixes dynamic import syntax.

3. Dependency Update

Upgrade Next.js and peer dependencies in sync:

# Using npm
npm install next@latest react@latest react-dom@latest

# Update Types
npm install --save-dev @types/react@latest @types/react-dom@latest

4. Manual Verification Rules

  1. Async Context: Verify all uses of cookies(), headers(), and route params are now awaited.
  2. Metadata: Ensure generateMetadata types match the new async params signature.
  3. Caching: In v15+, fetch defaults to { cache: 'no-store' }. If you need the old behavior, explicitly set { cache: 'force-cache' }.

5. Testing Build

  • Run npm run build immediately after codemods and package updates.
  • Check for "Hydration failed" or "Turbopack" compatibility errors if using --turbo.

🚫 Anti-Patterns

  • Do NOT use standard patterns if specific project rules exist.
  • Do NOT ignore error handling or edge cases.

> related_skills --same-repo

> typescript-tooling

Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)

> typescript-security

Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)

> typescript-language

Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)

> typescript-best-practices

Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)

┌ stats

installs/wk0
░░░░░░░░░░
github stars341
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#editor#react
└────────────