Visualize your Next.js app directory routes
npm install next-route-visualizer
next-route-visualizer using npm:
npm install next-route-visualizer
`
$3
Once you've installed the package, you can import the Visualizer component into any page of your Next.js version 13 app directory.
For ease of use just import it in the root page for instance:
`jsx
import Visualizer from 'next-route-visualizer';
export default function Home() {
return (
)
}
`
That's it! The Visualizer component will render a tree chart that displays the routes of your Next.js app directory.
$3
| Prop name | Type | Description
| ----------------- | -------------------- | ------------
| path | String or undefined | Path to the starting route (relative to the app directory).
If not provided, the component will search for the app directory within the root folder or .src/ folder.
| baseURL | String or undefined | Base URL of your project.
Default: http://localhost:3000
| displayColocating | Boolean or undefined | Display colocating folders
Default: false
---
Example
The below example shows how to use the path, baseURL and displayColocating parameters.
`jsx
import Visualizer from 'next-route-visualizer';
export default function Home() {
return (
)
}
`
Only the sub-routes of blog (blog included) will be displayed on the chart. This assumes that blog is a direct sub-route of the app root (i.e ./app/blog in your file system).
Since displayColocating was also provided, all the colocating folders will also be included on the chart.
---
Features
Under the hood, next-route-visualizer utilizes ReactFlow to build the chart.
- Starting route: You can start displaying at any route of your project.
- Side dashboard: Display information about a route
- Name
- Link
- Path
- Type
- Next.js files
- Other files (non Next files)
- Display if RSC or Client according to the file having the 'use client'` statement.