nextjs-devtools

Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.

25 stars

byComeOnOliver

View on GitHub Installation ↓

Best use case

nextjs-devtools is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using nextjs-devtools should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/nextjs-devtools/SKILL.md --create-dirs "https://raw.githubusercontent.com/ComeOnOliver/skillshub/main/skills/aiskillstore/marketplace/92bilal26/nextjs-devtools/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/nextjs-devtools/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How nextjs-devtools Compares

Feature / Agent	nextjs-devtools	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

Related Guides

AI Agents for Coding

Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.

SKILL.md Source

# Next.js DevTools

Inspect and debug Next.js applications via MCP server.

## Quick Start

```bash
# 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

| Tool | Description |
|------|-------------|
| `list-routes` | Get all app routes |
| `get-route-info` | Details for specific route |
| `list-components` | React components in app |
| `get-build-info` | Build configuration |
| `get-config` | next.config.js settings |

## Workflow Patterns

### Pattern 1: Route Inspection

```bash
# 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

```bash
# 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

```bash
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
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:

```bash
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t <tool-name>
```

## Troubleshooting

| Issue | Solution |
|-------|----------|
| Server not starting | Check `npx next-devtools-mcp@latest` works manually |
| No routes found | Ensure running from Next.js project root |
| Build info empty | Run `next build` first |

Related Skills

react-nextjs-development

from ComeOnOliver/skillshub

React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.

nextjs-supabase-auth

from ComeOnOliver/skillshub

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

nextjs-best-practices

from ComeOnOliver/skillshub

Next.js App Router principles. Server Components, data fetching, routing patterns.

nextjs-app-router-patterns

from ComeOnOliver/skillshub

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.

chrome-devtools

from ComeOnOliver/skillshub

Control Chrome browser programmatically using chrome-devtools-mcp. Use when user asks to automate Chrome, debug web pages, take screenshots, evaluate JavaScript, inspect network requests, or interact with browser DevTools. Also use when asked about browser automation, web scraping, or testing websites.

chrome-devtools-debugging

from ComeOnOliver/skillshub

Debug and analyze web applications using Chrome DevTools MCP. Use for console log inspection, network request monitoring, performance analysis, and debugging authenticated sessions. For basic browser automation (screenshots, form filling), use browser-discovery skill instead.

nextjs-15-specialist

from ComeOnOliver/skillshub

Use when working with Next.js 15 features, App Router, Server Components, Server Actions, or data fetching patterns. Ensures correct usage of Server vs Client Components and modern Next.js patterns.

nextjs-15-patterns

from ComeOnOliver/skillshub

Next.js 15 App Router patterns and best practices.

frontend-nextjs-app-router

from ComeOnOliver/skillshub

Use when working with Next.js App Router tasks - creating pages in /app/, setting up dynamic routes ([id]/page.tsx), implementing nested layouts/templates (layout.tsx), optimizing Server/Client components, or building ERP role-based pages (admin/teacher/student dashboards). Auto-use for all /app/ directory operations, dynamic routing, and App Router-specific features.

building-nextjs-apps

from ComeOnOliver/skillshub

Build Next.js 16 applications with correct patterns and distinctive design. Use when creating pages, layouts, dynamic routes, upgrading from Next.js 15, or implementing proxy.ts. Covers breaking changes (async params/searchParams, Turbopack, cacheComponents) and frontend aesthetics. NOT when building non-React or backend-only applications.

nextjs-turbopack

from ComeOnOliver/skillshub

Next.js 16+ 和 Turbopack — 增量打包、文件系统缓存、开发速度，以及何时使用 Turbopack 与 webpack。

nextjs-upgrade

from ComeOnOliver/skillshub

Next.js version migrations using official guides and codemods. Use when migrating a Next.js project to a new major version using codemods. (triggers: package.json, next upgrade, migration guide, codemod)