Next.js RSC Boundary Pack

Turn invisible Next.js boundaries into visible cues in VS Code. This extension pack helps you understand Client vs Server Components and visualize server call paths while you work.

Included Extensions

• Component boundary visualization: makotot.vscode-nextjs-component-boundary-visualizer
• Server functions visualizer: makotot.nextjs-server-functions-visualizer

Install

• Marketplace: https://marketplace.visualstudio.com/items?itemName=makotot.nextjs-rsc-boundary-pack
• CLI: code --install-extension makotot.nextjs-rsc-boundary-pack

Usage

Open a Next.js project and start editing:

• See Client vs Server component boundaries directly in the editor.
• Inspect server function call paths to understand data flow and execution.

No additional configuration is required for most projects.

Feedback

For issues or feature requests, please use the pages of the included extensions:

• Component boundary visualization: https://marketplace.visualstudio.com/items?itemName=makotot.vscode-nextjs-component-boundary-visualizer
• Server functions visualizer: https://marketplace.visualstudio.com/items?itemName=makotot.nextjs-server-functions-visualizer