next-devtools-mcp-skill

Diagnose Next.js 16+ runtime errors and routes via DevTools.

4|Updated May 16, 2026

Search Tags:#debugging #next.js #mcp #playwright #documentation search #runtime diagnostics #upgrade to nextjs 16

Ready to run

npx skills add https://github.com/Aradotso/devtools-skills --skill next-devtools-mcp-skill

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: next-devtools-mcp-skill
Source: https://github.com/Aradotso/devtools-skills/tree/main/skills/next-devtools-mcp-skill
Command: npx skills add https://github.com/Aradotso/devtools-skills --skill next-devtools-mcp-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you diagnose and fix issues in Next.js applications faster by combining runtime diagnostics, documentation search, and targeted browser verification in one agent workflow.

Core Features & Use Cases

Runtime diagnostics for Next.js 16+: Identify errors, routes, logs, configuration, and environment-related issues from a running dev server.
Documentation-first guidance: Search and fetch relevant official Next.js documentation to implement fixes correctly and avoid guessing.
Browser automation for verification: Use Playwright-driven flows to validate pages visually and catch runtime or UI problems after changes.
Upgrade and migration workflows: Use guided prompts to upgrade to Next.js 16 and enable Cache Components with safer, testable steps.

Quick Start

Ask your agent: “Use the init tool to set up Next.js DevTools context, then check nextjs://errors and summarize the root cause.”

Frequently Asked Questions about next-devtools-mcp-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I debug a blank page in a Next.js application?▼

Next.js runtime diagnostics identify errors, routes, and logs from a running dev server to pinpoint the root cause of a blank page. It pairs runtime state extraction with official documentation search to guide the correct fix.

What is the best way to upgrade to Next.js 16 and enable Cache Components?▼

The best way to upgrade to Next.js 16 and enable Cache Components is using guided migration workflows with safer, testable steps. It verifies fixes by validating pages visually using Playwright-driven browser automation flows.

Can I use Playwright to verify Next.js runtime fixes?▼

Yes, you can use Playwright to verify Next.js runtime fixes through browser automation. It executes targeted browser_eval flows to validate pages visually and catch runtime or UI problems after applying changes.

How do I search official Next.js documentation while debugging?▼

You can search official Next.js documentation while debugging by using documentation-first guidance tools. It fetches relevant official docs directly within the agent workflow to implement fixes correctly and avoid guessing.

Does this Next.js debugging workflow require a specific version?▼

Yes, this Next.js debugging workflow applies to Next.js 16+ development tasks. It initializes the Next.js DevTools context to diagnose errors, verify route structure, and resolve upgrade or migration issues.