nextjs-devtools_skill

Overview

This skill provides Next.js development tooling via an MCP server to inspect routes, components, build configuration, and runtime settings. It helps you quickly discover app structure and debug routing or build issues without manually searching the codebase. Use it from a project root to get targeted insights for Next.js apps only.

How this skill works

The skill runs tools through an MCP client that either spawns a short-lived server per call or connects to a persistent server. Available commands list routes, inspect a specific route, enumerate React components, and fetch build and next.config.js details. Results return structured information you can use to trace routing, verify builds, and locate components.

When to use it

• When debugging routing problems or unexpected 404s in a Next.js app
• When you need a quick inventory of pages, API routes, and components
• When diagnosing build failures or verifying next.config.js settings
• When onboarding into an unfamiliar Next.js codebase to map structure
• When running CI or local checks that require programmatic route info

Best practices

• Run commands from the Next.js project root to ensure accurate results
• Use the on-demand spawn mode (-s) for single quick checks to avoid persistent processes
• Start a persistent server for repeated inspections during long debugging sessions
• Run next build before requesting build info to populate build-related data
• Validate npx next-devtools-mcp@latest manually if the server fails to start

Example use cases

• List all app routes to confirm which pages and API endpoints are exposed
• Fetch route details for /api/auth to trace middleware, handlers, and params
• Enumerate React components to find shared UI elements and potential duplicates
• Inspect next.config.js to verify rewrites, redirects, and experimental flags
• Check build info when a deployment fails to identify misconfigured outputs