nextjs-15-expert
The reference subagent for Next.js 15 App Router work. Encodes current-version idioms (Server Components by default, caching opt-in, async params) plus the specific Do NOTs that keep Claude from reaching for older patterns.
sonnetAsk base Claude to "add server-side pagination to this Next.js page" and you get code that works — usually with a client component, a useEffect, and a Cursor-style pattern from three years ago. Ask nextjs-15-expert the same question and you get a Server Component using searchParams, matching your existing App Router conventions, and respecting Next.js 15's caching behavior changes. Same model, same context, dramatically different output.
The difference is the system prompt. nextjs-15-expert is essentially a senior Next.js engineer's opinionated brief on "how we do things in Next.js 15 in 2026" compressed into ~150 lines of Markdown. Once installed at .claude/agents/nextjs-15-expert.md, every Claude Code session in your Next.js project gets the same up-to-date guidance without you having to remember to include it — and without polluting your main conversation context.
If you build on Next.js 15 App Router, this is the single most valuable subagent to install. It goes deeper than what a CLAUDE.md alone can carry, and it stays available whenever Claude needs deep framework knowledge.
The full nextjs-15-expert definition
Save this file to .claude/agents/nextjs-15-expert.md in your Next.js 15 project.
How to install
Project scope is what most teams use. User scope makes sense only if you work across many Next.js projects with the same conventions.
Project scope Recommended
Save to .claude/agents/nextjs-15-expert.md at the root of your Next.js project. Commit to git. Every teammate gets the specialist on next pull.
User scope Personal
Save to ~/.claude/agents/nextjs-15-expert.md. The agent activates in any Next.js project you touch. Skip if your projects have different conventions per repo.
Version-specific
For projects still on Next.js 14, install nextjs-14-expert instead — the caching defaults and async params rules differ meaningfully. Mixing versions produces plausible-looking but broken code.
How to use it
The agent auto-invokes on Next.js-related prompts if the description matches. You can also invoke it explicitly.
'use client', and splits the component so the wrapper is a Server Component with a smaller interactive child.cache: 'force-cache' or next.revalidate) rather than hunting for other causes.revalidatePath call for after the underlying data updates.Alternative configs
Adjust the agent for specific team conventions or project stages.
pages/. If the user asks for a Pages Router pattern, propose the App Router equivalent instead." Prevents accidental hybrid setups on projects migrating away from Pages Router.@/components/ui/* before writing custom components. Do NOT edit files under components/ui/ — regenerate with pnpm shadcn add." Wires the agent into the shadcn workflow.next dev) by default, not Turbopack — project has known incompatibility with --turbo.Pairs well with
The 'Next.js trifecta' — agent + template + framework MCP — gives Claude the fullest possible context for Next.js work.
model: opus on this command for E2E test design.tsc --noEmit after writes. Catches type errors in the agent's output before they compound. Especially valuable for App Router's stricter typing.Common issues and fixes
The four issues most reported with framework subagents, applied to nextjs-15-expert.
const params = props.params — params are async in Next.js 15, always await." Explicit anti-patterns beat general rules for behavior correction.Write includes config files.tools to explicit directories: Write(app/**), Write(components/**), Write(lib/**). Config files aren't in any of those, so they're inaccessible. If config changes are legitimate, invoke a second agent explicitly.> use the nextjs-15-expert agent to… for explicit delegation, or ensure your slash command's frontmatter routes to the agent. The agent's own context window is what keeps your main conversation clean.Other framework specialists items
Same category, different job.
🐛 Hit an error?
AI Error Hub covers Claude Code errors and stack traces — cross-referenced with everything on this site.
Frequently asked questions
The questions developers ask most about nextjs-15-expert.
Base Claude knows Next.js at a mostly-current tutorial level; nextjs-15-expert knows current-version idioms, opinionated conventions, and Next 15's specific caching-and-async-params changes.
The gap is most obvious on Next.js 15-specific features where base Claude sometimes defaults to Next.js 14 patterns that look right but fail at runtime.
The specialist also runs in its own context window, so its work doesn't pollute your main conversation.
Match your project's actual Next.js version. Check package.json. Next.js 15 changed defaults significantly:
- Caching is opt-in (was opt-out in 14)
- Params and searchParams are async (were sync in 14)
A 15-expert giving 14 advice or vice versa produces code that looks right but breaks. During a 14→15 migration, install both briefly and remove the older one after the migration completes.
Via the description field. Claude Code reads all subagent descriptions on session start and routes work to the one whose description best matches your prompt.
The reference config uses "Use PROACTIVELY" plus specific trigger keywords: App Router, Server Components, page.tsx, layout.tsx, route.ts, Server Actions, searchParams.
Include the vocabulary your team actually uses when talking about Next.js code.
Sonnet by default. Framework work is largely applied — knowing the idioms and applying them correctly — which Sonnet handles well.
Reserve Opus for framework agents only when the work is architectural (designing a new module structure, choosing data-fetching strategies for complex pages).
For daily Next.js coding, Sonnet with the specialist system prompt beats Opus without it.
Directory-scoped writes plus Next.js-specific bash. Reference config:
Read,Grep,Glob,EditWrite(app/**),Write(components/**),Write(lib/**)Bash(pnpm:*),Bash(npx next:*)
Do not allow general Bash. Do not allow Write on next.config.js unless you specifically want config changes going through this agent.
They complement each other:
- CLAUDE.md — tells Claude about your project (versions, deployment targets, team conventions).
- Agent — tells Claude about the framework itself (default patterns, gotchas, current idioms).
Both load on session start. Together they give Claude the fullest possible context for Next.js work — the trifecta with an added MCP server is the mature setup.
Install both specialists. Give each a directory-scoped tool restriction:
- Next.js agent →
Write(apps/web/**) - FastAPI agent →
Write(apps/api/**)
Cross-cutting work routes to the main conversation, but framework-specific work goes to the right specialist. Common pattern for polyglot full-stack projects.
It knows what's in the config you install. That's the whole point of the agent — you can encode information about post-cutoff features by adding them to the "Next.js 15 specifics" section.
When Next.js ships a new feature, update the agent config the same day; every session from then on incorporates the update.
Our editorial team refreshes the reference config within 48 hours of every Next.js release.
Yes, temporarily. Make the two descriptions non-overlapping so Claude Code's auto-routing picks the right one:
- nextjs-14-expert — mentions "Pages Router" or "Next.js 14".
- nextjs-15-expert — mentions "App Router", "Server Components", "Next.js 15".
Add directory-scoped tool restrictions so each only writes into the code owned by its version. Remove the older agent once the migration completes.
It's an instruction to the agent about how to structure its responses. When it implements a feature, it will:
- Explain the Server/Client boundary decision.
- Show a diff, not the full file.
- Note caching implications.
- Mention which
revalidatePath/revalidateTagcalls are needed.
That consistency makes agent output easy to review — every response has the same shape, so you know where to look for the important information.
Get the weekly Claude Code digest
Every Tuesday: new framework specialists, Anthropic release recap, and the best community submission. 13,000+ developers read it.