Nextar

Nextar is an open-source developer tool for Next.js developers to provide server-side network request metrics along with detailed charts on Google's core web vitals, in order to assist with development when working with server side rendered components.

Note: Nextar is only compatible with versions of Next.js 13 and above

Table of Contents

• Features
• Getting Started
• Usage
• Additional Information
• Authors
• Tech Stack

Features

Nextar provides two dashboards:

• Server Side Activity (Endpoint, Type of Request, Response Status, Response Size, Start Time, Duration) with waterfall view
• Web Vitals (FCP, LCP, CLS, FID)

Getting Started

1. In your terminal, install the Nextar NPM package

   npm install nextarjs

2. Run the following to create the Nextar files

   npx nextar-create

3. In your package.json, add the following to scipts:

   "nextar": "node --require ./server/server.js & next dev",

4. in your terminal run the following command:

   npm run nextar

Open your dashboards by going to your hosted website and navigating to the two dashboard endpoints: http://localhost:3000/nextar-dashboard http://localhost:3000/nextar

Usage

Insert gifs here...

Additional Information

FID will be replaced with NIS in March 2024.

Authors

Amulya Uppala | Github | LinkedIn

Andrew Lee | Github | LinkedIn

Isabelle Ro | Github | LinkedIn

Julia Shi | Github | LinkedIn

Tech Stack