next-devtools-guide
Provides guidance on using the next-devtools MCP server. Use when working with Next.js projects that have the MCP server configured, when the user encounters connection issues, or when needing help with error detection, route inspection, Server Action tracing, or Cache Components migration.
- Installs
- 89
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/fradser/dotclaude --skill next-devtools-guide- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads next-devtools-guide automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Next.js DevTools MCP
Requirements: Node.js v20.19+, npm or pnpm, Next.js 16+ for runtime diagnostics.
Total capabilities: 7 Tools + 2 Prompts + 17 Resources = 26 available features.
Tool naming: All tools follow mcp__plugin_next-devtools_next-devtools__<tool-name>. This file uses abbreviated names for brevity.
See references/tools-reference.md for the complete tools table and nextjs_call tool names.
Tools (7)
| Tool | Purpose |
|---|---|
init | Initialize MCP context with documentation-first behavior |
nextjs_index | Discover running Next.js dev servers and available MCP tools |
nextjs_call | Call a specific MCP tool on a running Next.js dev server |
nextjs_docs | Fetch Next.js official documentation by path |
browser_eval | Playwright browser automation for testing |
enable_cache_components | Migrate to Next.js 16 Cache Components mode |
upgrade_nextjs_16 | Guide through upgrade to Next.js 16 |
Prompts (2)
| Prompt | Purpose |
|---|---|
upgrade-nextjs-16 | Complete upgrade guide including codemod execution and manual fixes |
enable-cache-components | Complete Cache Components setup with automated error fixing |
Resources (17)
Cache Components (13):
cache-components://overview- Critical errors AI agents make, quick referencecache-components://core-mechanics- Fundamental paradigm shift and cacheComponents behaviorcache-components://public-caches- Public cache mechanics using 'use cache'cache-components://private-caches- Private cache mechanics using 'use cache: private'cache-components://runtime-prefetching- Prefetch configuration and stale time rulescache-components://request-apis- Async params, searchParams, cookies(), headers() patternscache-components://cache-invalidation- updateTag(), revalidateTag() patterns and strategiescache-components://advanced-patterns- cacheLife(), cacheTag(), draft modecache-components://build-behavior- Prerendering, static shells, build-time behaviorcache-components://error-patterns- Common errors and solutionscache-components://test-patterns- Real test-driven patterns from 125+ fixturescache-components://reference- Mental models, API reference, checklistscache-components://route-handlers- Using 'use cache' in Route Handlers (API Routes)
Other (4):
nextjs-fundamentals://use-client- Learn when and why to use 'use client' in Server Componentsnextjs16://migration/beta-to-stable- Complete guide for migrating from Next.js 16 beta to stablenextjs16://migration/examples- Real-world examples of migrating to Next.js 16nextjs-docs://llms-index- Complete Next.js documentation index
Session Initialization
Call init at the start of every session to establish documentation-first behavior and tool usage guidance.
Quick Start
Next.js 16+ (runtime diagnostics):
- Start the dev server:
npm run dev(orpnpm dev) - Call
initto initialize MCP context - Call
nextjs_indexto discover the running server and available tools - Call
nextjs_callwith the desiredtoolNameto execute tools on the dev server
All Next.js versions (automation and docs):
After init, use upgrade_nextjs_16, enable_cache_components, nextjs_docs, or browser_eval as needed.
Common Workflows
Before implementing changes: Call nextjs_index to understand current application state, then nextjs_call with the appropriate tool.
Error detection: Call nextjs_index, then nextjs_call with toolName="get_errors".
Route inspection: Call nextjs_index, then nextjs_call with toolName="get_routes".
Server Action tracing: Call nextjs_call with toolName="get_server_action_by_id" and appropriate args.
Documentation search: Read the nextjs-docs://llms-index MCP resource to get the correct path, then call nextjs_docs with that path.
Important: The args parameter for nextjs_call MUST be an object. Omit args entirely if the tool takes no arguments.
Troubleshooting
MCP server not connecting:
- Verify Next.js v16+
- Confirm
next-devtools-mcpis configured in.mcp.json - Start or restart the dev server (
npm run dev) - If
nextjs_indexauto-discovery fails, ask the user which port their dev server is running on and pass it as theportparameter
"No server info found": Dev server must be running. Use the upgrade_nextjs_16 tool if on Next.js 15 or earlier.
Module not found: Clear the npx cache and restart the MCP client.
Best Practices
- Call
initat session start before using other tools - Start the dev server before using
nextjs_indexornextjs_call - Prefer
nextjs_index/nextjs_calloverbrowser_evalfor error detection and diagnostics - Use
browser_evalonly for tasks requiring actual page rendering or JavaScript execution - Read
nextjs-docs://llms-indexresource first before callingnextjs_docs
FAQ
What does the next-devtools-guide skill do?
Provides guidance on using the next-devtools MCP server. Use when working with Next.js projects that have the MCP server configured, when the user encounters connection issues, or when needing help with error detection, route inspection, Server Action tracing, or Cache Components migration.
How do I install next-devtools-guide?
Run npx skills add https://github.com/fradser/dotclaude --skill next-devtools-guide in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/next-devtools-guide/ (personal) or .claude/skills/next-devtools-guide/ (project).
Which AI agents can use next-devtools-guide?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is next-devtools-guide safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains next-devtools-guide?
It is published by fradser in fradser/dotclaude. It has 89 recorded installs.
More from fradser/dotclaude
patent-architect
fradser/dotclaude
Automatically searches prior art via SerpAPI and generates Chinese patent application forms. This skill should be used when the user wants to generate Chinese patent application forms, or mentions "patents", "inventions", or wants to protect technical innovations.
agent-browser
fradser/dotclaude
Open the skill to read its SKILL.md instructions.
behavior-driven-development
fradser/dotclaude
Applies behavior-driven development principles including Gherkin scenarios and test-driven development. This skill should be used when the user asks to implement features, fix bugs, or when writing executable specifications and tests before writing production code.
commit-and-push
fradser/dotclaude
Creates clean conventional git commits using standard git and pushes changes to the remote repository. Use when the user asks to "commit and push", "push changes", or complete a commit followed by git push.
executing-plans
fradser/dotclaude
Executes a written implementation plan via per-batch sub-agent coordinators with verification and commits between batches.
Popular backend & apis skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
entra-app-registration
microsoft/azure-skills
Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.
google-agents-cli-adk-code
google/agents-cli
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).
embedded-captions
heygen-com/hyperframes
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.
entra-agent-id
microsoft/azure-skills
Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).
neon
neondatabase/agent-skills
Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.