nVision

nVision is an open-source developer tool for Next.js applications that provides users server-side network request metrics and an interactive hierarchical file tree, aiding with rapid debugging and deployment.

Note: nVision currently only supports App Router

Getting Started

Run the following commands to install nVision's npm package and add the necessary files required to implement nVision:

npm install nvisionjs
npx nvisionjs-create

Add the below to your next.config.js

experimental: { instrumentationHook: true },

Add the following script to your package.json

"nvision": "node --require ./nvisionServer.js & next dev"

Run the following command to start the development server

npm run nvision

Open your dashboard by going http://localhost:3000/nvisionDashboard (or wherever your app is hosted)

Open your application in a new window to view real time updates on the dashboard

Features

• Users can interact with their app and view server-side network activity on the dashboard table such as routes, status codes, methods and duration of network calls
• Users can view the directory structure of their app in tree form to help visualize complex applications

Examples

Table view

  

Tree view

  

Upcoming Features

• Augmented metrics for client-side and database requests
• Expanded network activity visualization
• Support for Pages Router
• New dashboard tab to display route connections between pages

Contributors

Caitlin O'Donohue - GitHub | Linkedin

Sunny Pacheco - GitHub | Linkedin

Jiyoung Lee - GitHub | Linkedin

Isaac Lee - GitHub | Linkedin

Bennett Ma - GitHub | Linkedin

Special Mentions

Special thanks to the NetPulse team for their advice and inspiration.

License

Distributed under the MIT License. See License for more information.

Tech Stack