nextjs-devtools-guide

What problem does it solve?

Next.js APIs evolve rapidly across versions, so relying on outdated pre-existing knowledge leads to incorrect implementations and hard-to-debug runtime errors. Manually inspecting running dev servers and cross-referencing scattered documentation wastes valuable development time.

Core Features & Use Cases

• Docs-First API Verification: Always fetches official Next.js documentation via the nextjs_docs MCP tool to confirm correct API usage before writing code.
• DevTools MCP Integration: Discovers running Next.js dev servers, inspects route structures, retrieves compilation and runtime errors, and tests page rendering in a real browser.
• Standardized Workflows: Provides step-by-step guidance for design, implementation, debugging, and verification phases of Next.js App Router (v16+) development, including pre-built patterns for Server Components, Client Components, Server Actions, and common error fixes.
• Use Case: When building a Next.js 16+ app with dynamic routes, this skill guides you to correctly await params, verify the syntax in official docs, and test the rendered page to avoid runtime errors.

Quick Start

Use the nextjs-devtools-guide skill to debug the routing error on your Next.js app's user profile page by checking the dev server state and confirming the correct params handling syntax in official documentation.