NEXT Project Map

Next.js Project Architecture Visualizer

NEXT Project Map is a high-fidelity CLI tool designed to transform abstract Next.js codebases into interactive, architectural blueprints. It uses TypeScript AST parsing to generate precise maps of your application's internal anatomy.

One Map, Four Perspectives

• The Route Tree: A high-level visualization of your Next.js file-system routing. Perfect for mapping out the user journey and layout nesting.
• The Dependency Graph: A deep-dive into code relationships. Instantly see how a single change to a shared component ripples through your entire app.
• The Component Topology: A structural look at your UI's "physical" layout. Understand the spatial relationship between layouts, pages, and their nested children.
• The Architecture Map: The ultimate project blueprint. A shared source of truth for onboarding new developers and communicating project scale to stakeholders.

Technical Features

• Framework-Aware Route Nodes: Groups Next.js folder conventions (layout, page, loading, error) into logical nodes.
• RSC Boundary Visualizer: Detects "use client" directives and renders the transition between Server and Client environments as a clear visual boundary.
• Dependency Tracing: Follows imports to show how components are shared across routes.
• Interactive Focus Mode: Hover or search to highlight specific components while others dim.
• Hot Spot Detection: Highly-connected components are visually highlighted.
• Dual-Theme Support: High-fidelity mapping in both Blueprint Light and Tech-Noir Dark modes.

Quick Start

No configuration required. Point it at your project root and it discovers your Next.js app automatically.

npx next-project-map

How it Works

1. CLI Scan: The tool uses ts-morph to perform a three-pass AST scan of your project.
2. Data Generation: It extracts routes, layouts, and component dependencies.
3. Dashboard Launch: A local React Flow dashboard opens in your browser with the interactive map.

Privacy & Security

• Local-First: Your source code never leaves your machine.
• AST-Only: The tool reads the structure and relationships of your code without executing it.
• Zero Upload: No cloud sync, no accounts, no risk.

Made By

Built with precision by tieallen.