nVision — Server-Side Network Observability For Next.js

3 min readJul 28, 2023

What is Next.js?

Next.js is an open-source meta-framework built on top of React. It provides developers with extensive features and optimizations to build highly dynamic and performant web applications. Next.js excels in speed and improved search engine optimization (SEO) through Static Site Generation (SSG) and Server-Side Rendering (SSR) reducing the load of client-side Javascript.

Another key feature of Next.js is its built-in App Router, an evolution of its file-based Pages Router. With the foundational Next.js 13.4 release, the App Router is now stable and ready for production. With this update, the App Router now fully supports React server components, nested routes and layouts, simplified data fetching, and streaming and suspense. Every route in the application is automatically defined by placing each file within the App directory.

Considerations When Using Next.js

Despite its popularity for streamlining the full-stack development process, it can be difficult to take full advantage of these benefits. Debugging in Next.js is challenging due to limited insight into server-side network activity. In addition, as your application grows in size, because of Next.js’s nested routing system, maintaining a high-level view of your application structure becomes increasingly complex.

Welcome to nVision

nVision is an open-source developer tool that provides users with the ability to obtain and display metrics from their server-side data fetches in real time. Bundled as an NPM package, nVision integrates a dashboard that features a table of network call information and a reactive tree displaying the hierarchical file structure of the user’s application.

Installation and Usage

In your terminal, install the nVision NPM package

npm install nvisionjs

Next, run the following command to create the necessary files required to implement nVision:

npx nvisionjs-create

In your package.json add the following to scripts:

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

In your terminal run the following command:

npm run nvision

Navigate to http://localhost:3000/nvisionDashboard (or the local development environment that your application is running in)
In a new window, open your application
Enjoy viewing your metrics in the dashboard table and tree!