Overview Version History Q & A Rating & Review
NextJs Flow
Understand your Next.js project at a glance — visualize every component, hook, action, API route and their connections as an interactive flow diagram.
Features
Instant Project Scanning — Automatically discovers pages, layouts, components, hooks, actions, API routes, utils and middleware across your entire Next.js project.
Interactive Flow Diagram — Explore your project architecture visually with zoom, pan, minimap and click-to-navigate.
Sidebar Explorer — Browse all discovered entities grouped by type (Pages, Components, Hooks, etc.) in a dedicated Activity Bar panel.
Status Bar Indicator — See your project's entity count at a glance and open the flow diagram with a single click
Getting Started
Install the extension.
Open any Next.js project.
Click the NextJs Flow icon in the Activity Bar to browse your project structure.
Press Ctrl+Alt+F (or Cmd+Alt+F on Mac) to open the interactive flow diagram.
Commands
Command
Shortcut
Description
NextJs Flow: Show Flow DiagramCtrl+Alt+FOpen the interactive flow diagram
NextJs Flow: Analyze Project—
Scan the project for entities and connections
NextJs Flow: Refresh—
Re-scan the project
What Gets Detected
Entity
How It's Found
Pages page.tsx/jsx/ts/js files in the App Router
Layouts layout.tsx/jsx/ts/js files
Components Files inside components/ directories
Hooks Files named useXxx.ts/tsx or inside hooks/ directories
Server Actions Files inside actions/ directories
API Routes route.ts/js files
Utils & Libs Files inside utils/ or lib/ directories
Middleware middleware.ts/js at the project root
Special Files loading, error, template, not-found, and next.config files
Requirements
VS Code 1.85.0 or higher
A Next.js project using the App Router
Known Issues
Connection mapping currently uses file-based heuristics (layout → page nesting).
Release Notes
See the Changelog tab for a full list of changes.
License
MIT
