Next Browser
https://github.com/vercel-labs/next-browser- Category
- Developer Tools
- Rank
- No. 1387Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- vercel-labs
- GitHub
- 205 stars
- Latest release
- v0.7.1
- Date
About
Experimental browser primitives for Next.js apps by Vercel Labs.
What it does
Next Browser turns React and Next.js debugging into structured shell output for agents. A persistent Chromium session exposes component trees, accessibility snapshots, errors, network traffic, performance data, partial prerendering shells, screenshots, and page interaction across short, stateless commands.
Why it's ranked here
Its value is unusually concrete: agents can inspect React internals, interact through accessibility references, and correlate partial prerendering holes with likely blockers. The persistent daemon avoids repeated browser startup. The narrow focus also matters. This is a development and diagnosis tool for Next.js applications, not a general browser automation platform.
What's good
The tool joins several debugging layers in one command surface. It exposes props, hooks, state, source locations, browser logs, request bodies, Core Web Vitals, hydration timing, and rerender profiles. Partial prerendering analysis classifies dynamic holes, groups root causes, and suggests files to inspect. Cookie import supports authenticated development pages without echoing secret values in parser errors.
Tradeoffs
Setup requires Node 20 or newer plus a separate Chromium installation. The browser is headed and carries a preloaded React DevTools extension. Several capabilities depend on React internals, Next.js development endpoints, profiling builds, or partial prerendering behavior. Component identifiers expire after navigation, and long console, render, or response output spills into temporary files.
How to use it well
Use it in an agent loop that opens a local Next.js app once, then alternates inspection, interaction, and targeted profiling. It suits component diagnosis, accessibility-guided navigation, authenticated page checks, network inspection, hydration work, and partial prerendering analysis. Keep a broader browser automation or test framework for portable end-to-end suites outside this Next.js development workflow.
Technical notes+
package.json defines a public ESM npm package with a next-browser binary, Node >=20, TypeScript compilation, Playwright, @next/playwright, and published dist plus extensions directories. src/client.ts starts a detached daemon when needed and exchanges newline-delimited JSON over the endpoint defined by src/paths.ts. src/daemon.ts dispatches actions into src/browser.ts, which maintains one Playwright context and page with the vendored React DevTools extension. src/tree.ts decodes React DevTools operation batches and uses the renderer inspection interface for component detail. src/mcp.ts calls the Next.js development MCP endpoint over JSON-RPC and parses SSE data. src/suspense.ts analyzes suspended boundaries and groups blockers, while src/sourcemap.ts resolves original source locations through Next.js or source maps. src/cookies.ts accepts JSON arrays, copied cURL commands, and bare cookie headers. src/network.ts records requests and writes oversized bodies to temporary files.
Observed
- License
- MIT
- Primary language
- TypeScript
- Install surface
- Public npm package named @vercel/next-browser with a global next-browser executable
- Runtime requirements
- Node.js 20 or newer and Playwright Chromium
- Interface
- Command-line tool backed by a persistent browser daemon and newline-delimited JSON messages
- Browser platform
- Chromium through Playwright with a preloaded React DevTools extension
- Daemon transport
- Unix domain socket on Unix-like systems and a named pipe on Windows
- Next.js integration
- Calls the Next.js development MCP endpoint using JSON-RPC over HTTP
Read from README.md, package.json, src/cli.ts, src/mcp.ts, src/tree.ts, src/paths.ts, src/client.ts, src/daemon.ts, src/browser.ts, src/cookies.ts, src/network.ts, src/suspense.ts, src/sourcemap.ts, prototypes/auth-cookies/server.mjs, extensions/react-devtools-chrome/popups/shared.js.
What it can do
Enable client-side navigation
Next.js application routes → Smooth page transitions without full page reloads
Preload pages on hover
Link elements in Next.js app → Cached page content for instant navigation
Implement progressive web app features
Next.js application → PWA-enabled web application with offline capabilities
Optimize resource loading
JavaScript and CSS assets → Performance-optimized asset delivery
Handle browser history management
Navigation events and route changes → Proper browser back/forward button functionality
Enable experimental browser APIs
Next.js application code → Access to cutting-edge browser features and capabilities
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.