nvisionjs v1.2.5
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
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
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
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago