| name | nextjs-agent-first |
| description | Next.js 16.3+ agent-first features: AGENTS.md, first-party Skills, agent-browser React introspection, actionable errors. Use when building Next.js apps with AI coding agents. |
| author | Appie-1 |
| tags | ["nextjs","agent-first","ai","development","vercel"] |
| related_skills | ["nextjs-expert","agent-browser","nextjs-turbopack"] |
Next.js Agent-First Features
Next.js 16.3+ is the first framework designed explicitly for AI-agent-driven development.
Key Features
AGENTS.md (auto-generated docs)
next dev auto-writes version-matched docs pointers into AGENTS.md- Agents read actual docs instead of guessing from training data
- Opt-out via
agentRules: false in next.config.ts
First-Party Skills (npx-installable)
Install via npx skills add vercel/next.js:
| Skill | Purpose |
|---|
next-dev-loop | Full dev feedback loop: drive browser, read console, inspect React tree, follow network requests |
next-cache-components-adoption | Incremental or direct adoption of Cache Components ("use cache") |
next-cache-components-optimizer | Optimize routes for instant navigation by growing the static shell |
Agent Browser React Introspection
agent-browser v0.27+ can run React DevTools commands from CLI:
agent-browser --enable react-devtools
agent-browser react tree
agent-browser react inspect <fiber-id>
agent-browser react renders start
agent-browser react suspense --only-dynamic --json
Actionable Errors (Instant Insights)
Error overlay shows labeled fixes (Stream / Cache / Block) with a "Copy prompt" button that copies a paste-ready agent prompt.
Streamlined MCP Server
Two new tools: get_compilation_issues and compile_route — check compilation without full next build.
Turbopack Improvements (16.3)
- ~90% less memory (21.5GB → 2GB for vercel.com)
- ~2.3x faster cached builds
- Experimental Rust React Compiler (20-50% faster)
import.meta.glob API support- ~15% faster dev cold start
Usage
When building or debugging Next.js projects with an AI agent:
- Enable AGENTS.md: Ensure
next dev runs in the project so docs are auto-generated
- Use next-dev-loop skill: Load it when you need browser-based verification
- Run agent-browser with React:
agent-browser --enable react-devtools for component inspection
- Copy actionable error prompts: Use the error overlay's "Copy prompt" button for instant fixes
- Cache Components optimizer: Run after building to optimize routes for instant nav
Pitfalls
- 16.3 is on
@preview npm tag — stable expected in weeks
- AGENTS.md is auto-overwritten each
next dev run — don't manually edit it
- agent-browser React DevTools requires
--enable react-devtools flag
