Skip to content

Latest commit

 

History

History
120 lines (81 loc) · 4.68 KB

README.md

File metadata and controls

120 lines (81 loc) · 4.68 KB
Raw

NextInspect

Developer Tool for Viewing Next.js Sever Side Rendered Network Requests

Table of Contents

  1. Description
  2. Getting Started
  3. Features
  4. Roadmap
  5. Contributions
  6. Maintainers
  7. Changelog
  8. License

Description

NextInspect is a developer tool that allows Next.js developers to see network request metrics in Server Side Rendered(SSR) components. Metrics are displayed in a format similar to the native Chrome network devtools, so onboarding and usage is a breeze. Metrics for network requests made in Client Side Rendered components are also shown, eliminating the need to click back and forth between the native Chrome devtools and NextInspect. Please also install the Chrome extension for NextInspect to see metrics in the devtools panel.

Built With

Getting Started

Installation

Installation is done using the npm install command.

$ npm install nextinspect

In the package.json of your next.js app, add this to the scripts

"nextinspect": "node ./node_modules/nextinspect/dist/server.js & node ./node_modules/.bin/next dev"

In the 'next.config.js' file of your Next.js app, add a key to your 'nextConfig' object called experimental. The value of this key should be an object and add the following key to this inner object

instrumentationHook: True

Add a file to the root directory of your Next.js project called 'instrumentation.js' and paste in the following code

export async function register() {
    if (process.env.NEXT_RUNTIME === 'nodejs') {
         await import('nextinspect/tracing'); 
        } 
    }

Quick Start

  1. Install the NextInspect Chrome extension here
  2. Start both the telemetry collection and your Next.js app in dev mode by running
$ npm run nextinspect
  1. Go to your Next.js application page.
  2. Open the NextInspect devtool by right clicking the page and selecting inspect. In the double right arrow dropdown to the right of the Network tab, you will be able to view your other devtool extensions.
  3. Refresh your page to view telemetry metrics.

Features

Waterfall Graph

NextInspect provides a waterfall chart showing all network requests made in both client-side and server-side rendered components. Requests originating from server-side rendered components are shown in pink/purple, while client-side rendered requests are in green. The time on the X-axis is measured in milliseconds.

Realtime Metrics

Network metrics are served in realtime and NextInspect supports additional requests streamed in after the initial page load. Sequential page loads will be added to the same chart. To view requests from individual page loads, simply click the "Clear History" button before navigating to a new page.

Roadmap

Here are some features our team is looking to bring to NextInspect in the near future:

  • Filtering options for chart columns to filter requests by name, method, rendering, etc.
  • Ability to export chart metrics to a HAR file.

If you have any suggestions or find any bugs, please feel free to open an issue.

Contributions

Our team welcomes and encourages new contributions. Any changes to the product resources such as documentation, code, etc should be made through pull requests. All pull requests will be reviewed before merging.

Changelog

[1.0.1] - Aug 9, 2023

Launched

Maintainers

License

This product is licensed under the MIT License without restriction.