{"repo":"oslabs-beta/NextLevel","free":true,"listed":false,"github":"https://github.com/oslabs-beta/NextLevel","clone":"git clone https://github.com/oslabs-beta/NextLevel.git","description":"NextLevel is a performance metrics dashboard tailored to Next.js applications that visualizes critical data, such as build time and key web vitals, enabling developers to pinpoint inefficiencies and improve development productivity and end-user experience.","language":"JavaScript","stars":48,"topics":["build-time","bundle-size","cumulative-layout-shift","dashboard","developer-tools","first-contentful-paint","first-input-delay","interaction-to-next-paint","largest-contentful-paint","nextjs"],"license":null,"category":"dashboards-admin","readme_excerpt":"In recent years, Next.js has gained immense popularity with developers, however many struggle to optimize the performance of their Next.js applications due to a lack of visibility into specific build and runtime metrics, making it difficult to identify and resolve bottlenecks efficiently. NextLevel is a performance metrics dashboard tailored to Next.js applications that visualizes critical data, such as build time and key web vitals, enabling developers to pinpoint inefficiencies and improve development productivity and end-user experience. Getting Started 1. To get started, visit nextlevel-dash.com and create an account. After account creation, you will be navigated to an onboarding page which will direct you to complete the below steps. 2. Install configure next.js bundle analyzer in your Next.js application NPM install Next.js Bundle Analyzer: Configure next.config.mjs file: 3. Install and configure our npm package, NextLevelPackage, through the terminal. It can also be found here. NPM Install NextLevelPackage: Import NextLevelPackage in layout.js: Add NextWebVitals component in RootLayout body: 4. Configure yoour Environmental Variables Add the following line to your .env.local file: When you create an account, the setup page will provide you with your API key. 5. Add Build Script to package.json Add the following script to your package.json: Run this build script instead of 'npm next build' to track metrics in the dashboard: 6. Navitage to your NextLevel dashboard to vie","default_branch":null,"files":null,"tree":[],"storefront":"/r/oslabs-beta","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/oslabs-beta/NextLevel/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}