nVision

A developer tool for Next.js

nVision is an open-source developer tool for Next.js applications. Designed to fully leverage the power of Server-Side rendering that Next.js offers. Gain a new perspective of your application through active network observability and visualization of your application architecture.

Features

Enhance your development experience

Click Here to Learn More

Observability

Real-time observability for network requests made from Server Side Rendered Components in Next.js

File Tree

Interactive tree model showing nested file structure to help visualize complex routes.

Debugging and Optimization

Debug network requests and optimize performance through accurate error messages and filters

Demo

nVision monitors server side fetch calls and displays them on our table where you can keep track of and filter requests

Get Started

1. Navigate to your application directory and copy and paste the below commands to the terminal. This will create all the necessary files required to trace and visualize your application.

npm i nvisionjs
npx nvisionjs-create

2. Add the below to your next.config.js

experimental: { instrumentationHook: true }

3. Add the below script to your package.json file

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

4. Run "npm run nvision" in your terminal.

npm run nvision

5. Navigate to http://localhost:3000/nvisionDashboard (or your local development environment) first.

6. In a new window, open your application development environment navigate through your app to view updates in the dashboard.

Meet The Team!

Bennett

Caitlin

Isaac

Jiyoung

Sunny