nextjs-devtools
Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps.Use when working on Next.js applications, debugging routing, or inspecting app structure.NOT for general React or non-Next.js projects.
When & Why to Use This Skill
The Next.js DevTools MCP skill is a specialized development utility designed to streamline the inspection, debugging, and architectural analysis of Next.js applications. By leveraging the Model Context Protocol (MCP), it enables AI agents and developers to programmatically access critical project metadata, including route maps, React component structures, and build configurations, ensuring faster troubleshooting and more accurate code modifications within the Next.js ecosystem.
Use Cases
- Route Mapping & Analysis: Automatically list and inspect all application routes to understand the entry points and structure of complex Next.js projects.
- Debugging Routing Logic: Retrieve detailed information for specific routes to troubleshoot navigation issues, middleware behavior, or dynamic routing conflicts.
- Component Discovery & Auditing: Quickly identify and locate React components within the project to facilitate UI updates or architectural reviews.
- Build & Configuration Troubleshooting: Access next.config.js settings and build information to resolve environment-specific issues or deployment failures.
- Project Onboarding: Help new developers or AI agents quickly grasp the structure of a Next.js codebase by providing a high-level overview of routes and components.
| name | nextjs-devtools |
|---|---|
| description | | |
Next.js DevTools
Inspect and debug Next.js applications via MCP server.
Quick Start
# Start server (spawns on-demand)
bash scripts/start-server.sh
# Or use directly via mcp-client
python3 scripts/mcp-client.py call \
-s "npx next-devtools-mcp@latest" \
-t list-routes
Available Tools
| Tool | Description |
|---|---|
list-routes |
Get all app routes |
get-route-info |
Details for specific route |
list-components |
React components in app |
get-build-info |
Build configuration |
get-config |
next.config.js settings |
Workflow Patterns
Pattern 1: Route Inspection
# List all routes
python3 scripts/mcp-client.py call \
-s "npx next-devtools-mcp@latest" \
-t list-routes
# Get specific route details
python3 scripts/mcp-client.py call \
-s "npx next-devtools-mcp@latest" \
-t get-route-info \
-p '{"route": "/api/auth"}'
Pattern 2: Debug Build Issues
# Check build config
python3 scripts/mcp-client.py call \
-s "npx next-devtools-mcp@latest" \
-t get-build-info
# Check next.config.js
python3 scripts/mcp-client.py call \
-s "npx next-devtools-mcp@latest" \
-t get-config
Pattern 3: Component Discovery
python3 scripts/mcp-client.py call \
-s "npx next-devtools-mcp@latest" \
-t list-components
Scripts
start-server.sh
For persistent server (multiple calls):
bash scripts/start-server.sh
# Server runs on default port
# Use mcp-client.py with -u flag instead of -s
On-Demand (Recommended)
For single calls, use -s flag which spawns server per-call:
python3 scripts/mcp-client.py call \
-s "npx next-devtools-mcp@latest" \
-t <tool-name>
Troubleshooting
| Issue | Solution |
|---|---|
| Server not starting | Check npx next-devtools-mcp@latest works manually |
| No routes found | Ensure running from Next.js project root |
| Build info empty | Run next build first |