Visualizer for Next.js page router showing routes and components in tree hierarchies.
| Routes View | Components View |
|---|---|
|
|
|
- Install package
npm install jabi-next-visualizer
- Run parse to parse project's source code
npx jabi-next-visualizer extract
- Run server for visualizer app preview
npx jabi-next-visualizer visualize
After developing package:
- Build the TypeScript file
npm run tsc
It will create new folder named cli-build.
- Build visualizer app
cd app && npm run build
app folder contain visualizer app using Next.js page router. cli folder contain cli app, server app, and config constants.