Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
bilalmk avatar

Nextjs Devtools

  • 18 installs
  • 1 repo stars
  • Updated January 27, 2026
  • bilalmk/todo_correct

nextjs-devtools is a Claude Code skill that inspects and debugs Next.js apps (routes, components, build info, config) via the next-devtools MCP server.

About

This skill inspects and debugs Next.js applications through the next-devtools MCP server. It exposes tools to list routes, get route details, list React components, and read build info and next.config.js settings. A developer uses it when working on a Next.js app to debug routing or inspect app structure. It is explicitly not for general React or non-Next.js projects.

  • Inspects Next.js routes, components, build info, and config via an MCP server
  • Exposes list-routes, get-route-info, list-components, get-build-info, get-config tools
  • Runs next-devtools-mcp on-demand through a bundled mcp-client.py

Nextjs Devtools by the numbers

  • 18 all-time installs (skills.sh)
  • Ranked #403 of 596 Debugging skills by installs in the Skillselion catalog
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
At a glance

nextjs-devtools capabilities & compatibility

Capabilities
debugging
Works with
vercel
Use cases
debugging
Runs
Runs locally
Pricing
Free
From the docs

What nextjs-devtools says it does

Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps.
SKILL.md
NOT for general React or non-Next.js projects.
SKILL.md
Inspect and debug Next.js applications via MCP server.
SKILL.md
npx skills add https://github.com/bilalmk/todo_correct --skill nextjs-devtools

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs18
repo stars1
Last updatedJanuary 27, 2026
Repositorybilalmk/todo_correct

What it does

Inspect Next.js routes, components, build info, and config to debug app structure during development.

Who is it for?

Debugging routing or inspecting the structure of a Next.js application.

Skip if: General React or non-Next.js projects.

When should I use this skill?

Working on a Next.js application, debugging routing, or inspecting app structure.

What you get

Returns Next.js routes, component lists, and build or config details for debugging.

By the numbers

  • Exposes 5 MCP tools
  • Documents 3 workflow patterns

Files

SKILL.mdMarkdownGitHub ↗

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

ToolDescription
list-routesGet all app routes
get-route-infoDetails for specific route
list-componentsReact components in app
get-build-infoBuild configuration
get-confignext.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

On-Demand (Recommended)

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

IssueSolution
Server not startingCheck npx next-devtools-mcp@latest works manually
No routes foundEnsure running from Next.js project root
Build info emptyRun next build first

Related skills

Debuggingfrontendtesting

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.