DevTools: Server Components Inspector Panel

[stefan-garofalo]

Goals

Add a Server Components Inspector Panel to the existing Next.js DevTools (alongside Route Info and Segment Explorer):

• RSC payload visualization and inspection
• Real-time server component data flow tracking
• Integration with existing devIndicators
• If possible a timeline view (like network-tab?) of server-side fetches.

Background

Server Components debugging is a known pain point in the Next.js ecosystem. While third-party solutions like rsc-parser and next-devtools exist, developers still struggle with:

• Inspecting RSC payload data during development
• Understanding data flow between server and client components
• Lack of visibility into server-side data fetching operations

While tools like rsc-parser help, having this integrated with Next.js DevTools would provide:

• Zero-config setup for developers
• Deep integration with Next.js internals
• Consistent UX with other DevTools panels

Proposal

Implementation Approach:
This would extend the existing DevTools infrastructure (alongside Route Info and Segment Explorer) by:

• Adding hooks to the RSC rendering pipeline to capture payload data
• Creating a new panel component in the DevTools UI to display RSC payloads, data fetching operations, and server-to-client components data-flow
• Integrating with the current experimental DevTools flags system

Technical Integration Points:

• Server-side: Hook into packages/next/src/server/app-render/ for RSC data collection
• Client-side: Extend existing DevTools components for the inspector panel
• Add new experimental flag (e.g., devtoolRscInspector)

Contribution Interest:
Yes, I'm very interested in contributing this feature.

Questions for maintainers:

• Is RSC debugging tooling already planned for the roadmap?
• Any preferred integration approach or technical constraints?