skills.rest
Asmayaseen
AsmayaseenCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-devtools

Inspect Next.js routes, components, and build info via MCP server.

2|Updated Dec 24, 2025
Search Tags:#next.js#debug#mcp#devtools#routes#inspection#build-info
One-click install
npx skills add https://github.com/Asmayaseen/hackathon-2 --skill nextjs-devtools-asmayaseen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-devtools
Source: https://github.com/Asmayaseen/hackathon-2/tree/main/.claude/skills/nextjs-devtools
Command: npx skills add https://github.com/Asmayaseen/hackathon-2 --skill nextjs-devtools-asmayaseen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Next.js development tooling via MCP provides developers with a centralized way to inspect and debug Next.js applications by exposing routes, components, and build information from a running app.

Core Features & Use Cases

  • Route Discovery: List all app routes with details to verify routing configuration.
  • Component Discovery: Enumerate React components used by the Next.js app for auditing structure.
  • Build Insight: Retrieve build configuration and status to diagnose build-related issues.
  • Use Case: While debugging a large Next.js project, quickly verify route mappings and component usage to accelerate issue resolution.

Quick Start

Start the MCP server: bash scripts/start-server.sh Connect with the MCP client to explore the app: python3 scripts/mcp-client.py call --tool list-routes --url http://localhost:8809 python3 scripts/mcp-client.py call --tool list-components --url http://localhost:8809 python3 scripts/mcp-client.py call --tool get-build-info --url http://localhost:8809

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 for debugging?▼

You can inspect Next.js routes and components by running an MCP server that exposes app structures and build information, allowing you to verify routing configurations and audit React component usage during debugging.

What is an MCP server used for in Next.js development?▼

An MCP server in Next.js development provides a centralized interface to discover app routes, enumerate React components, and retrieve build configuration to diagnose issues across local and CI environments.

How do I retrieve Next.js build configuration and status via MCP?▼

To retrieve Next.js build configuration and status via MCP, start the server and use an MCP client to call the get-build-info tool, which returns data to help diagnose build-related issues.

Do I need an MCP client to list Next.js app routes?▼

Yes, you need an MCP HTTP or stdio client to connect to the running server and call tools like list-routes, which enumerates all app routes with details to verify your configuration.

Can I audit React component structure in a large Next.js project using MCP?▼

Yes, you can audit React component structure by calling the list-components tool through your MCP client, enumerating components used by the Next.js app to accelerate issue resolution.

Related Skills

Explore More Software Engineering Skills→
arisngarisng
5

copilot-cli-mcp-config

Configure GitHub Copilot CLI MCP servers in mcp-config.json.

Community
Basic
drvossdrvoss
42

fix-build-errors

Diagnoses build, compilation, and type-check failures and generates minimal fixes.

Community
Intermediate
791994545791994545
4

react-best-practices

Optimize React and Next.js application performance with code, data fetching, and rendering guidelines.

Community
Advanced
Ikram-AlamIkram-Alam

nextjs-devtools

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

Community
Intermediate