NEXT Project Map
Next.js Project Architecture Visualizer. A CLI tool that reads your AST and generates an interactive blueprint of every route, component, and data dependency.
As Next.js apps scale,
the mental model breaks.
The Folder Maze
File-system routing makes it impossible to see the app as a whole. You're navigating a tree, not a map.
RSC Boundary Tracking
Knowing where Server Components end and Client Components begin is constant cognitive overhead - nothing surfaces it visually.
Onboarding Friction
New developers spend days just understanding how components connect. There's no artifact you can hand them that shows it.
Invisible Complexity
Clients rarely understand the architecture they're paying for. A folder tree doesn't communicate the work.
One Map. Four Perspectives.
NEXT Project Map isn't just a diagram-it's a multi-dimensional view of your application's internal anatomy.
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.
How it works.
Run the CLI
Point the tool at your project root. No config file needed - it discovers your Next.js app automatically.
Three-pass AST scan
The engine walks the codebase: first for routes and layouts, then for component boundaries, then for cross-route import chains.
Blueprint opens in browser
A React Flow dashboard launches locally with the full interactive map. Zoom, filter, search, and trace — no account needed.
Engineered for clarity.
Framework-Aware Route Nodes
Groups Next.js folder conventions - layout, page, loading, error - into logical nodes. The map reflects the app, not the filesystem.
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. Exposes hidden coupling before it becomes a maintenance problem.
Interactive Focus Mode
Hover or search to highlight a specific component. Everything else dims. Trace a data flow without losing it in the noise.
Hot Spot Detection
Highly-connected components get a visual indicator. See the critical parts of your architecture at a glance, not after a refactor.
Dual-Theme Structural UI
High-fidelity mapping available in both Blueprint Light and Tech-Noir Dark modes. A premium asset for any documentation suite.
This isn't a folder-tree viewer.
ts-morph gives the engine full access to the TypeScript AST — it actually reads and understands your code, not just the file names.
- TypeScript
- Node.js
- ts-morph
- Vite
- React
- @xyflow/react
- Dagre
- CLI
- Local-first
- Private repo safe
Architecture as a Deliverable.
NEXT Project Map makes the architecture a deliverable. The map is something you can open, share, and actually point at. It shows where the complexity lives, how data flows, and what depends on what - before anyone has to read a line of code.
The AST approach matters here. A folder-tree viewer gives you names. This tool gives you relationships.
Provide stakeholders with technical clarity
A visual blueprint of the architecture is a tangible asset for alignment. It translates complex engineering decisions into a high-level map that non-technical stakeholders can understand and trust.
Cut onboarding time
A new developer can orient themselves in an hour instead of a week. The map answers the first dozen questions automatically.
Catch coupling early
Shared component dependencies are invisible until they cause a problem. The dependency trace makes them visible before they do.
No infrastructure to run
Local-first CLI. Nothing to deploy, no API keys, no cloud. The tool runs where your code already is.
Need a custom build?
I design and build high-end Next.js applications.
Where this is going.
CLI for handoffs
Portable CLI tool. Run it locally, generate the blueprint, hand it to a client or a new developer. No account required.
GitHub integration
Connect a public repository and generate the map on-demand. Persistent links for sharing architecture docs.
VS Code deep-links
Click any node in the map and jump directly to that file in your editor. The diagram becomes a navigation tool.