skills.rest
MohamadJoumaa
MohamadJoumaaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

next-dev-loop

Verify Next.js code changes at runtime using the /_next/mcp endpoint and agent-browser.

Updated Aug 26, 2026
Search Tags:#dev server#browser automation#next.js#mcp#turbopack#runtime verification#react debugging
One-click install
npx skills add https://github.com/MohamadJoumaa/Direct --skill next-dev-loop-mohamadjoumaa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-dev-loop
Source: https://github.com/MohamadJoumaa/Direct/tree/main/.cursor/skills/next-dev-loop
Command: npx skills add https://github.com/MohamadJoumaa/Direct --skill next-dev-loop-mohamadjoumaa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agent-browser.

What problem does it solve? Code edits that pass type-checking and compilation can still fail at runtime. This Skill closes that gap by verifying every change against a live next dev server through two cross-checking views: Next.js's own /_next/mcp endpoint and a real Chrome browser driven by agent-browser. ## Core Features & Use Cases - Dual-view verification: Combines /_next/mcp (routes, RSC, server actions, server logs, compile issues) with agent-browser (DOM, console, network, React fiber) so framework-level and browser-level behavior are checked together. - Four-mode failure checks: After each edit, confirms the app compiles via get_compilation_issues, runs without errors, behaves as intended in the browser, and renders correctly at the React component level. - Session-persistent browser testing: Uses worktree-scoped agent-browser sessions with saved login state, so gated pages stay authenticated across edit/verify loops. - Use Case: After editing a server action in a Next.js 16 app, run the loop to confirm Turbopack compiled cleanly, the route renders without server errors, the page behaves correctly in Chrome, and no extra React renders were introduced. ## Quick Start Ask the assistant to verify that your recent Next.js code change actually works in the running dev server using the next-dev-loop skill.

Frequently Asked Questions about next-dev-loop

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

FAQPage Schema
How do I verify Next.js changes work at runtime after editing code?▼

Run the edit/verify loop against a live next dev server: check compilation with get_compilation_issues, inspect runtime errors via /_next/mcp, then drive the page in a real Chrome browser with agent-browser to assert actual behavior and React render state.

What is the /_next/mcp endpoint in Next.js?▼

It is an HTTP endpoint Next.js exposes about itself during development, listing tools like get_routes, get_errors, get_page_metadata, and get_compilation_issues. It reports framework-level state such as routes, RSC segments, server actions, and logs as Next.js sees them.

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

Yes, it requires Next.js 16.3 or later running with Turbopack, since get_compilation_issues only works on Turbopack and errors on webpack. agent-browser 0.31.1 or later is also required for React introspection and session restore.

Why does agent-browser return a blank page or no session error?▼

A blank snapshot or about:blank usually means a stale browser session, not a broken route. Reopen the URL with the same --session and --restore flags, or close and reopen the session; avoid falling back to curl since it bypasses the browser under test.

How do I keep login state between browser test runs?▼

Derive one worktree-scoped session id and export AGENT_BROWSER_SESSION and AGENT_BROWSER_RESTORE for every command. The close command saves cookies and storage, so the next open with --restore reloads the authenticated state.

Related Skills

Explore More Software Engineering Skills→
vercelvercel
142.0k

next-dev-loop

Verify Next.js runtime behavior after editing app code.

Official
Advanced
brandonlacoste9-techbrandonlacoste9-tech

vercel-deployment

Deploy Next.js applications to Vercel with environment variable and runtime guidance.

Community
Intermediate
screenfluentscreenfluent

Testing & Verification

Run automated PHP test suites and static analysis after code changes.

Community
Advanced
awfixers-stuffawfixers-stuff

clerk-testing

Automate Clerk authentication flow testing with Playwright or Cypress.

Official
Intermediate