nextjs-v16 — Claude Code skill: migrate to Next.js 16
A skill that walks a project through the Next.js 16 migration: async request APIs, opt-in caching with "use cache", Turbopack. Useful when upgrading an existing app.
npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-v16 -a claude-codeWhat nextjs-v16 does
The skill covers the move to Next.js 16 and gathers the usual migration mistakes into one list. It pairs each anti-pattern with the fix: sync request APIs versus await on params, cookies() and headers(); middleware.ts versus proxy.ts with export function proxy; the old revalidateTag("posts") call versus revalidateTag("posts", "max") or the { expire: ... } form.
Beyond the summary there are three references: references/migration-checklist.md, references/cache-components.md and references/turbopack.md. So a step-by-step checklist, a cache components write-up, and a separate note on Turbopack, which is the default in 16.
The skill is marked user-invocable: false and disable-model-invocation: true, so you cannot call it by hand. It loads on its own when the agent touches Next.js code. If your project still has sync params and cookies(), that is worth checking.
What it helps with
- switch sync
paramsandcookies()toawait - replace
middleware.tswithproxy.tsandexport function proxy - fix
revalidateTagcalls for the new signature - turn on opt-in caching with
"use cache" - sort out Turbopack as the default in 16
Example prompts for the agent
- check my project for Next.js 16 anti-patterns
- help me migrate
middleware.tstoproxy.ts - how should I call
revalidateTagin Next.js 16
How to install nextjs-v16
1Skills CLI (Vercel)
npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-v16 -a claude-code2Manually: put the files in place
~/.claude/skills/nextjs-v16/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/nextjs-v16/
1Skills CLI (Vercel)
npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-v16 -a codex2Manually: put the files in place
.agents/skills/nextjs-v16/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-v16 -a cursor2Manually: put the files in place
.cursor/skills/nextjs-v16/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install bobmatnyc/claude-mpm-skills nextjs-v162Manually: put the files in place
.github/skills/nextjs-v16/SKILL.md1Skills CLI (Vercel)
npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-v16 -a gemini-cli2Platform CLI
gemini skills install https://github.com/bobmatnyc/claude-mpm-skills --path toolchains/nextjs/nextjs-v16Manually: put the files in place
.devin/skills/nextjs-v16/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-v16 -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about nextjs-v16
How do I install nextjs-v16 in Claude?
Run npx skills add bobmatnyc/claude-mpm-skills --skill nextjs-v16 -a claude-code. The skill lands in ~/.claude/skills/nextjs-v16/SKILL.md.
What does nextjs-v16 do?
It guides the Next.js 16 migration: async request APIs, opt-in caching with "use cache", Turbopack. It also ships an anti-pattern list and three references under references/.
Can I invoke this skill manually?
No. It sets user-invocable: false and disable-model-invocation: true, so it fires on its own while the agent works on Next.js code.
Source text
SKILL.md · MIT
---
name: nextjs-v16
description: Next.js 16 migration guide (async request APIs, "use cache", Turbopack)
user-invocable: false
disable-model-invocation: true
version: 1.1.0
category: toolchain
progressive_disclosure:
entry_point:
summary: "Next.js 16 migration: async request APIs + opt-in caching"
tags: [nextjs, nextjs-16]
---
# Next.js 16
- Async `params`/`cookies`/`headers`; opt-in caching via `"use cache"`; Turbopack default.
Anti-patterns:
- ❌ Sync request APIs; ✅ `await` `params`, `cookies()`, and `headers()`.
- ❌ Keep `middleware.ts`; ✅ use `proxy.ts` and `export function proxy`.
- ❌ `revalidateTag("posts")`; ✅ `revalidateTag("posts", "max")` or `{ expire: ... }`.
References: `references/migration-checklist.md`, `references/cache-components.md`, `references/turbopack.md`
© bobmatnyc · MIT · bobmatnyc/claude-mpm-skills
