Static analysis tool for visualizing Next.js component trees. See which components are server vs client, understand your app's component hierarchy, and identify optimization opportunities.
Try it online - No installation required, runs entirely in your browser (no data sent anywhere).
- Visualize component trees with server/client boundaries
- Identify "use client" directives and their cascade effects
- Analyze route structure and shared components
- Works with TypeScript path aliases (
@/*, etc.)
Roadmap
- Web application using File System Access API
- Enable ui to accept an URL of a repo to analyze it
- Publish packages (cli) to enable usages without UI
- (Maybe?) create Github Action for automatic reports (or show an example)
Visit albertodeago.github.io/nextxray and select your Next.js project folder. Uses the File System Access API (Chrome/Edge/Opera).
npx @nextxray/cli <path>File mode - Analyze a single component:
npx @nextxray/cli src/app/page.tsxDirectory mode - Analyze entire project:
npx @nextxray/cli .| Package | Description |
|---|---|
| @nextxray/core | Platform-agnostic AST parsing engine |
| @nextxray/node | Node.js filesystem implementation |
| @nextxray/browser | Browser File System Access API implementation |
| @nextxray/cli | Command-line interface |
Tip
Application is deployed automatically in GitHub Pages on push to main branch.
MIT