skills.rest
Ikram-Alam
Ikram-AlamCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-devtools

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

Updated Feb 5, 2026
Search Tags:#debugging#routing#components#mcp#devtools#nextjs#build-info
One-click install
npx skills add https://github.com/Ikram-Alam/The-Evolution-of-Todo-Mastering-Spec-Driven-Development-Cloud-Native-AI --skill nextjs-devtools-ikram-alam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-devtools
Source: https://github.com/Ikram-Alam/The-Evolution-of-Todo-Mastering-Spec-Driven-Development-Cloud-Native-AI/tree/main/.claude/skills/nextjs-devtools
Command: npx skills add https://github.com/Ikram-Alam/The-Evolution-of-Todo-Mastering-Spec-Driven-Development-Cloud-Native-AI --skill nextjs-devtools-ikram-alam

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill enables developers to inspect and debug Next.js applications via an MCP server, providing quick visibility into routes, components, and runtime behavior to speed up debugging and onboarding. NOT for general React or non-Next.js projects.

Core Features & Use Cases

  • Route inspection: enumerate all app routes to understand navigation and data-loading paths.
  • Component discovery: list React components used across pages to improve structure and reusability.
  • Build/config introspection: expose build information and next.config.js settings for performance tuning and debugging.
  • Use Case: diagnose routing issues, optimize builds, and gain a quick overview of unfamiliar Next.js projects.

Quick Start

Start the MCP server for Next.js DevTools: bash scripts/start-server.sh

Or run directly via the MCP client: python3 scripts/mcp-client.py call -s "npx next-devtools-mcp@latest" -t list-routes

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 queries your project directory to enumerate app routes and discover React components used across pages.

Can I use this to debug general React applications?▼

No, this tool is specifically for debugging Next.js applications via MCP DevTools and does not support general React or non-Next.js projects.

How do I retrieve build information and next.config.js settings in Next.js?▼

To retrieve build information and next.config.js settings, start the MCP server via the provided shell script or query the MCP client directly to expose runtime build config data.

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

The best way to diagnose routing issues is using an MCP client to call the list-routes function, which inspects all app routes to understand navigation and data-loading paths.

Do I need an MCP client to use Next.js DevTools?▼

Yes, you need an MCP client and the Next.js DevTools MCP tool to query routes, components, and config within your Next.js project directory.

How do I get a quick overview of an unfamiliar Next.js project?▼

To get a quick overview of an unfamiliar Next.js project, use the MCP DevTools to enumerate routes, discover components, and retrieve build configuration information.

Related Skills

Explore More Software Engineering Skills→
gqf2008gqf2008

mcporter

Manage MCP servers and tools from the terminal using the mcporter CLI.

Community
Advanced
oren-arguoren-argu

vercel-react-best-practices

Audits React/Next.js components and pages for prioritized performance improvements.

Community
Advanced
JoviDeCroockJoviDeCroock
29

react-devtools

Inspect React Native component trees and profile render timing via React DevTools protocol.

Community
Intermediate
zaid-khan-codezaid-khan-code
3

react-debugging

Map React DOM elements to owning components and inspect their props.

Community
Intermediate