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