skills.rest
raphaelandrews
raphaelandrewsCOMMUNITY
Explore all skills by this author →
Website𝕏@_andrewsshGitHub

next-browser

Access React DevTools-like data and Next.js dev overlay information from the command line.

1|1|Updated May 15, 2025
Search Tags:#performance#debugging#cli#nextjs#hydration#ppr#react-devtools
One-click install
npx skills add https://github.com/raphaelandrews/fsx --skill next-browser-raphaelandrews
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-browser
Source: https://github.com/raphaelandrews/fsx/tree/main/.agents/skills/next-browser
Command: npx skills add https://github.com/raphaelandrews/fsx --skill next-browser-raphaelandrews

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Agents debugging Next.js apps often lack direct access to component trees and performance insights without a GUI, making it hard to diagnose issues quickly.

Core Features & Use Cases

  • CLI-driven access to React DevTools-like data (component trees, props, hooks) and Next.js dev overlay data, presented as structured text.
  • Supports scenes like SSR vs CSR evaluation, PPR shell analysis, snapshots, logs, and network data to guide optimization.
  • Example scenario: profile a slow page by capturing hydration timing and the top render costs to identify bottlenecks.

Quick Start

Start the Next.js debugging session by running next-browser in your project to connect to the dev server and begin interactive exploration.

Frequently Asked Questions about next-browser

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

FAQPage Schema
How do I debug Next.js component trees and hooks from the command line?▼

To debug Next.js component trees from the command line, you can use a CLI tool to access React DevTools-like data and output it as structured text for analysis. This allows you to inspect component props and hooks without a GUI.

Can I profile Next.js hydration timing and PPR shells without a browser GUI?▼

Yes, you can profile Next.js hydration timing and PPR shells without a GUI by using CLI tools that extract dev overlay information. This provides performance profiling data and network insights directly in structured text format.

Do I need a running Next.js dev server to use CLI debugging tools?▼

Yes, accessing React DevTools-like data and Next.js dev overlay information via the command line requires a running Next.js dev server. The CLI connects to this server to extract component trees and performance profiling data.

What's the best way to evaluate SSR vs CSR boundaries in Next.js applications?▼

The best way to evaluate SSR vs CSR boundaries is by using a CLI debugging tool that connects to your Next.js dev server. It captures hydration timing and render costs to help identify bottlenecks across server and client boundaries.

How do I capture Next.js network requests and logs for agent ingestion?▼

You can capture Next.js network requests and logs for agent ingestion by running a CLI debugging session that extracts dev overlay data. The tool formats logs and network insights as structured text suitable for automated analysis.

Related Skills

Explore More Software Engineering Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
nicholasgriffintnnicholasgriffintn
2

vercel-react-best-practices

Apply Vercel best practices to optimize React and Next.js performance.

Community
Advanced
somachaksomachak

debugging-react-rendering

Diagnose rendering performance issues in React and Next.js applications.

Community
Intermediate
luizvergennesluizvergennes
1

next-browser

Expose Next.js component trees, props, hooks, and runtime data as shell commands.

Community
Advanced