nextjs-devtools

mjunaidca's avatarfrom mjunaidca

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.

⭐1stars🔀2forks📁View on GitHub🕐Updated Dec 22, 2025
[Developer Tools]

When & Why to Use This Skill

The Next.js DevTools skill is a specialized MCP (Model Context Protocol) server designed to streamline the development and debugging of Next.js applications. It empowers AI agents to programmatically interact with a project's architecture, allowing for real-time inspection of routes, React components, and build configurations. By bridging the gap between the AI and the Next.js runtime environment, it significantly accelerates the troubleshooting process and improves architectural oversight for modern web developers.

Use Cases

  • Route Mapping and Debugging: Automatically list all application routes and fetch detailed metadata for specific paths to resolve complex routing logic or broken links.
  • Component Discovery and Analysis: Inspect the React component hierarchy within a Next.js project to understand code structure and identify reusable UI elements without manual file searching.
  • Configuration and Build Troubleshooting: Retrieve 'next.config.js' settings and build information to diagnose environment-specific bugs, optimization issues, or deployment failures.
  • Project Onboarding: Help developers or AI agents quickly get up to speed on a new Next.js codebase by providing a high-level overview of its routes and internal components.
namenextjs-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

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