skills.rest
AbdullahMalik17
AbdullahMalik17COMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-devtools

Inspect routes, components, and build configuration of Next.js applications via MCP.

9|2|Updated Jan 31, 2026
Search Tags:#debugging#react#mcp#devtools#nextjs#routes#build inspection
One-click install
npx skills add https://github.com/AbdullahMalik17/Hacathan_5 --skill nextjs-devtools-abdullahmalik17
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-devtools
Source: https://github.com/AbdullahMalik17/Hacathan_5/tree/main/.claude/skills/nextjs-devtools
Command: npx skills add https://github.com/AbdullahMalik17/Hacathan_5 --skill nextjs-devtools-abdullahmalik17

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires next-devtools-mcp, and includes scripts (resource) components.

What problem does it solve? Debugging and understanding a Next.js application's structure often requires manually digging through files and configs. This Skill connects to the Next.js DevTools MCP server to programmatically inspect routes, components, and build settings, making it faster to diagnose routing issues and understand app architecture. ## Core Features & Use Cases - Route Inspection: List all application routes and retrieve detailed information for specific routes like /api/auth. - Component Discovery: Enumerate React components present in the application. - Build Debugging: Retrieve build configuration and next.config.js settings to troubleshoot build issues. - Use Case: When a page returns a 404 in a large Next.js app, use this Skill to list all routes, verify the route exists, and inspect its configuration to pinpoint the mismatch. ## Quick Start Ask the AI to list all routes in your Next.js project using the nextjs-devtools skill to verify your routing setup.

Frequently Asked Questions about nextjs-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I list all routes in a Next.js application?▼

Use the list-routes tool from the next-devtools-mcp server via the included mcp-client.py script. Run it with the stdio flag pointing to npx next-devtools-mcp@latest from your Next.js project root to get all app routes.

How to debug Next.js build configuration issues?▼

Call the get-build-info and get-config tools to retrieve the build configuration and next.config.js settings. If build info is empty, run next build first so the server has build output to inspect.

Does this work with non-Next.js React projects?▼

No, this Skill is specifically designed for Next.js applications and relies on the next-devtools-mcp server. It is not intended for general React projects or other frameworks.

Why does the Next.js DevTools server return no routes?▼

No routes are found when the MCP server is not started from the Next.js project root directory. Ensure you run the command from the project root and that npx next-devtools-mcp@latest works manually.

Can I run the MCP server persistently instead of per-call?▼

Yes, run the included start-server.sh script to launch a persistent server on a port (default 8809), then connect mcp-client.py using the --url flag instead of spawning a server per call with --stdio.

Related Skills

Explore More Software Engineering Skills→
sarimofficialsarimofficial

Build Error Handler

Diagnose and resolve Next.js and FastAPI build errors from logs and configuration files.

Community
Intermediate
mjunaidcamjunaidca
27

nextjs-devtools

Inspect Next.js routes, components, build info, and next.config.js settings via MCP.

Community
Advanced
jassicsjassics
6

mobile-pentest

Automate MASTG-based mobile penetration tests on Android and iOS apps.

Community
Advanced
SilverAssistSilverAssist
1

nextjs-tree-shaking

Convert default exports to named exports and refactor barrel files for Next.js 15 tree-shaking.

Official
Advanced