nextjs-devtools

Name: nextjs-devtools
Author: mjunaidca

21installs11forks

How to install nextjs-devtools?

mjunaidca/mjs-agent-skills/nextjs-devtools

$npx -y skills add mjunaidca/mjs-agent-skills --skill nextjs-devtools

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Next.js DevTools
2
3	Inspect and debug Next.js applications via MCP server.
4
5	## Quick Start
6
7	```bash
8	# Start server (spawns on-demand)
9	bash scripts/start-server.sh
10
11	# Or use directly via mcp-client
12	python3 scripts/mcp-client.py call \
13	-s "npx next-devtools-mcp@latest" \
14	-t list-routes
15	```
16
17	## Available Tools
18
19	\| Tool \| Description \|
20	\|------\|-------------\|
21	\| `list-routes` \| Get all app routes \|
22	\| `get-route-info` \| Details for specific route \|
23	\| `list-components` \| React components in app \|
24	\| `get-build-info` \| Build configuration \|
25	\| `get-config` \| next.config.js settings \|
26
27	## Workflow Patterns
28
29	### Pattern 1: Route Inspection
30
31	```bash
32	# List all routes
33	python3 scripts/mcp-client.py call \
34	-s "npx next-devtools-mcp@latest" \
35	-t list-routes
36
37	# Get specific route details
38	python3 scripts/mcp-client.py call \
39	-s "npx next-devtools-mcp@latest" \
40	-t get-route-info \
41	-p '{"route": "/api/auth"}'
42	```
43
44	### Pattern 2: Debug Build Issues
45
46	```bash
47	# Check build config
48	python3 scripts/mcp-client.py call \
49	-s "npx next-devtools-mcp@latest" \
50	-t get-build-info
51
52	# Check next.config.js
53	python3 scripts/mcp-client.py call \
54	-s "npx next-devtools-mcp@latest" \
55	-t get-config
56	```
57
58	### Pattern 3: Component Discovery
59
60	```bash
61	python3 scripts/mcp-client.py call \
62	-s "npx next-devtools-mcp@latest" \
63	-t list-components
64	```
65
66	## Scripts
67
68	### start-server.sh
69
70	For persistent server (multiple calls):
71
72	```bash
73	bash scripts/start-server.sh
74	# Server runs on default port
75	# Use mcp-client.py with -u flag instead of -s
76	```
77
78	### On-Demand (Recommended)
79
80	For single calls, use `-s` flag which spawns server per-call:
81
82	```bash
83	python3 scripts/mcp-client.py call \
84	-s "npx next-devtools-mcp@latest" \
85	-t <tool-name>
86	```
87
88	## Troubleshooting
89
90	\| Issue \| Solution \|
91	\|-------\|----------\|
92	\| Server not starting \| Check `npx next-devtools-mcp@latest` works manually \|
93	\| No routes found \| Ensure running from Next.js project root \|
94	\| Build info empty \| Run `next build` first \|

People who liked this also viewed

6 picks

Type

nextjs-devtools

21installs11forks

View on GitHub

How to install nextjs-devtools?

mjunaidca/mjs-agent-skills/nextjs-devtools

$npx -y skills add mjunaidca/mjs-agent-skills --skill nextjs-devtools

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Next.js DevTools
2
3	Inspect and debug Next.js applications via MCP server.
4
5	## Quick Start
6
7	```bash
8	# Start server (spawns on-demand)
9	bash scripts/start-server.sh
10
11	# Or use directly via mcp-client
12	python3 scripts/mcp-client.py call \
13	-s "npx next-devtools-mcp@latest" \
14	-t list-routes
15	```
16
17	## Available Tools
18
19	\| Tool \| Description \|
20	\|------\|-------------\|
21	\| `list-routes` \| Get all app routes \|
22	\| `get-route-info` \| Details for specific route \|
23	\| `list-components` \| React components in app \|
24	\| `get-build-info` \| Build configuration \|
25	\| `get-config` \| next.config.js settings \|
26
27	## Workflow Patterns
28
29	### Pattern 1: Route Inspection
30
31	```bash
32	# List all routes
33	python3 scripts/mcp-client.py call \
34	-s "npx next-devtools-mcp@latest" \
35	-t list-routes
36
37	# Get specific route details
38	python3 scripts/mcp-client.py call \
39	-s "npx next-devtools-mcp@latest" \
40	-t get-route-info \
41	-p '{"route": "/api/auth"}'
42	```
43
44	### Pattern 2: Debug Build Issues
45
46	```bash
47	# Check build config
48	python3 scripts/mcp-client.py call \
49	-s "npx next-devtools-mcp@latest" \
50	-t get-build-info
51
52	# Check next.config.js
53	python3 scripts/mcp-client.py call \
54	-s "npx next-devtools-mcp@latest" \
55	-t get-config
56	```
57
58	### Pattern 3: Component Discovery
59
60	```bash
61	python3 scripts/mcp-client.py call \
62	-s "npx next-devtools-mcp@latest" \
63	-t list-components
64	```
65
66	## Scripts
67
68	### start-server.sh
69
70	For persistent server (multiple calls):
71
72	```bash
73	bash scripts/start-server.sh
74	# Server runs on default port
75	# Use mcp-client.py with -u flag instead of -s
76	```
77
78	### On-Demand (Recommended)
79
80	For single calls, use `-s` flag which spawns server per-call:
81
82	```bash
83	python3 scripts/mcp-client.py call \
84	-s "npx next-devtools-mcp@latest" \
85	-t <tool-name>
86	```
87
88	## Troubleshooting
89
90	\| Issue \| Solution \|
91	\|-------\|----------\|
92	\| Server not starting \| Check `npx next-devtools-mcp@latest` works manually \|
93	\| No routes found \| Ensure running from Next.js project root \|
94	\| Build info empty \| Run `next build` first \|

People who liked this also viewed

6 picks

Type