nextjs-app-router-visualizer

Visualize your Next.js website Flow

Current status: experimental

What is this?

• nextjs-app-router-visualizer is a tool that helps you visualize the flow of your Next.js website.
• It helps you to understand the flow of your website by visualizing the page flow.

Usage

In your Next.js App router project root

$ npx nextjs-app-router-visualizer

or

$ npx nextjs-app-router-visualizer --entry app/page.tsx

• entry file path: The path of the entry page file that is the entry point of the page flow to be visualized.

ex.

$ npx nextjs-app-router-visualizer --entry app/page.tsx
$ npx nextjs-app-router-visualizer --entry src/app/page.tsx
$ npx nextjs-app-router-visualizer --entry src/app/folder/page.tsx

Example

• You can see the example app here
• You can see the example visualized page flow

Limitations

This project has many limitations because it is an experimental project.

• Only supports Next.js App router projects
• Does not support for redirect function yet
• Does not support for native History API yet
• Does not support for Route Groups yet
• ...etc

This project currently supports the following features.

• Only Top level useRouter router method
• Only Top level Link Component