skills.rest
muhammadwaheedairi
muhammadwaheedairiCOMMUNITY
Explore all skills by this author →
𝕏@mwaheedairiGitHub

nextjs-devtools

Inspects and debugs Next.js apps via an MCP server for routes, components, and build information.

Updated Feb 4, 2026
Search Tags:#debugging#routing#components#mcp#devtools#nextjs
One-click install
npx skills add https://github.com/muhammadwaheedairi/the-evolution-of-todo --skill nextjs-devtools-muhammadwaheedairi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-devtools
Source: https://github.com/muhammadwaheedairi/the-evolution-of-todo/tree/main/phase-2-fullstack/.claude/skills/nextjs-devtools
Command: npx skills add https://github.com/muhammadwaheedairi/the-evolution-of-todo --skill nextjs-devtools-muhammadwaheedairi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node, npm, python3, and includes scripts (resource) components.

What problem does it solve?

This skill enables developers to inspect and debug Next.js applications via an MCP server, making it easier to understand routing, components, and build configuration during development.

Core Features & Use Cases

  • Inspect routes, components, and build information for a Next.js project using the MCP server.
  • Retrieve route details, component trees, and build configuration to diagnose routing issues and UI structure.
  • Use Case: You are debugging a complex Next.js app; you can quickly list all routes, inspect the /api endpoints, and verify component usage to reduce churn during a migration.

Quick Start

Start the MCP server using the included script, then connect with the MCP client to list routes and route details.

  • Start server: bash scripts/start-server.sh
  • List all routes: python3 scripts/mcp-client.py call -s "npx next-devtools-mcp@latest" -t list-routes
  • Get details for a route: python3 scripts/mcp-client.py call -s "npx next-devtools-mcp@latest" -t get-route-info -p '{"route": "/"}'

Frequently Asked Questions about nextjs-devtools

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

FAQPage Schema
How do I inspect Next.js routes and components during debugging?▼

You can inspect Next.js routes and components by starting a local MCP server and using client scripts to call tools like list-routes and get-route-info, retrieving route details and component trees for debugging.

What do I need to run an MCP server for Next.js debugging?▼

Running the MCP server requires Node.js and npm to execute the server package, and Python3 to run the client scripts that invoke MCP tools for retrieving route and component information.

Can I list all API endpoints in my Next.js project via MCP?▼

Yes, you can list API endpoints by calling the list-routes tool via the MCP client script, which retrieves all routes including /api endpoints to help diagnose routing issues and verify endpoint configurations.

How does an MCP client retrieve build information for a Next.js app?▼

An MCP client retrieves build information by connecting to a locally running MCP server and invoking tools to fetch build configuration and component data, making it easier to understand app structure during development.

What is the best way to debug complex Next.js routing issues?▼

The best way to debug Next.js routing issues is using an MCP devtools interface to list all routes, inspect specific route details via get-route-info, and verify component usage to reduce churn during migrations.

Does Next.js debugging with MCP work without installing Python?▼

No, Python3 is required because the client scripts used to call MCP server tools for listing routes and retrieving component details are written in Python and need it to execute.

Related Skills

Explore More Software Engineering Skills→
hongmaple0820hongmaple0820
9

mcporter

List, invoke, and generate client bindings for MCP servers via CLI.

Community
Advanced
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
92Bilal2692Bilal26

nextjs-devtools

Inspect Next.js routes, components, and build information via MCP.

Community
Intermediate
Ikram-AlamIkram-Alam

nextjs-devtools

Inspect Next.js routes, components, and config via MCP server.

Community
Intermediate