August 11, 2023

A Chrome Developer Tool that enhances performance and observability for Next.js



PerfSSR is an open-source Chrome Developer Tool that enhances performance and observability for Next.js applications. It offers real-time performance analytics, providing valuable and comprehensive insights into various aspects of the application.


Tech Stack

JavaScript TypeScript Next.js React NPM NodeJS Express GoogleChrome MUI Chart.js Webpack Jest Babel eslint


Fetches made server-side get logged in your terminal not the browser. PerfSSR Dev Tool solves this by showing server-side fetch requests in browser alongside the Chrome Network tab.

Next.js already instruments using OpenTelemetry for us out of the box so we can just access their built-in spans.

Credit to NetPulse for this idea. Credit to ReaPer and Reactime for the idea of accessing render times via React Dev Tool hooks.

fetchrepo fetchstore



  1. Google Chrome

  2. Ensure you have React Dev Tools installed

  3. In your project directory npm install perfssr --save-dev

    and additional OpenTelemtry dependecies

    npm i --save-dev @opentelemetry/exporter-trace-otlp-http @opentelemetry/resources @opentelemetry/sdk-node @opentelemetry/sdk-trace-node @opentelemetry/semantic-conventions
  4. Install our PerfSSR Chrome Extension

  5. As of the current Next.js version [13.4.4], instrumentation is an experimental hook so it must be included in the next.config.js file. Add the following code to your next config object.

   experimental: {
     instrumentationHook: true
  1. Create a file in your project root directory called instrumentation.ts. This file will be loaded when Next.js dev server runs and sees that instrumentation is enabled. Within this file we need to import a file that we'll be creating in the next step that starts tracing the Next.js application
   export async function register() {
     //OpenTelemetry APIs are not compatible with edge runtime
     //need to only import when our runtime is nodejs
     if (process.env.NEXT_RUNTIME === "nodejs") {
       //Import the script that will start tracing the Next.js application
       //In our case it is perfssr.ts
       //Change it to your own file name if you named it something else
       await import("./perfssr");
  1. Create another file [.ts or .js] to your project root directory this can be named anything you'd like. We have ours called perfssr.ts

  2. Inside perfssr.ts copy and paste this block of code

   import { NodeSDK } from "@opentelemetry/sdk-node";
   import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
   import { Resource } from "@opentelemetry/resources";
   import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
   import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-node";

   const sdk = new NodeSDK({
     resource: new Resource({
       [SemanticResourceAttributes.SERVICE_NAME]: "next-app",

     spanProcessor: new SimpleSpanProcessor(
       new OTLPTraceExporter({
         //all traces exported to express server on port 4000
         url: `http://localhost:4000`,


8. Create a `.env` file in the root of your project directory. By default Next.js only creates spans for the API routes, but we want more information than that! To open it up, Next.js looks for a value set in `process.env` Add the line `NEXT_OTEL_VERBOSE=1` to your `.env` file.

9. Include another script line to your `package.json` file

javascript "perfssr": "node ./node_modules/perfssr/server.js & next dev"

10. Run PerfSSR by running the command `npm run perfssr` within your terminal.

### Chrome Extension Installation

1. Clone the PerfSSR repo onto your local machine

git clone

2. Install dependencies and build the PerfSSR application locally

npm install npm run build ```

  1. Add PerfSSR to your Chrome extensions
  • Navigate to chrome://extensions
  • Select Load Unpacked
  • Turn on 'Allow access to file URLs' in extension details
  • Choose PerfSSR/dist
  • Navigate to your application in development mode
  • Open up your project in Google Chrome
  1. Navigate to the PerfSSR panel. Click on the Start PerfSSR button will automatically refreshes the page and starts the extraction of performance data of the currently inspected webpage
  • Click on Regenerate Metrics will refresh the page to get updated rendering data
  • Click on Clear Network Data under the Server-side Fetching Summary table will clear all the current requests logged so far

Note: PerfSSR is intended for analyzing and providing performance insights into Next.js applications in development mode running on localhost:3000


To see examples of how to set up your app, we've included a sample app in the examples folder.


James Ye | Summer Pu | Jessica Vo | Jonathan Hosea