To get started, visit nextlevel-dash.com and create an account. After account creation, you will be navigated to an onboardingp page which will direct you to complete the below steps.

Install configure next.js bundle analyzer in your Next.js application

NPM install Next.js Bundle Analyzer:

npm install @next/bundle-analyzer

Configure next.config.mjs file:

import pkg from '@next/bundle-analyzer';
const withBundleAnalyzer = pkg({
    enabled: process.env.ANALYZE === 'true',
});

const nextConfig = {};

export default withBundleAnalyzer(nextConfig);

Install and configure our npm package, NextLevelPackage, through the terminal. It can also be found here.

NPM Install NextLevelPackage:
```
npm install nextlevelpackage
```
Import NextLevelPackage in layout.js:
```
import NextWebVitals from 'nextlevelpackage';
```
Add NextWebVitals component in RootLayout body:
```
export default function RootLayout({ children }) {
    return (
        <html lang="en">
        <body>
            <NextWebVitals />
            {children}
        </body>
        </html>
    );
}
```
Configure yoour Environmental Variables

Add the following line to your .env.local file:
```
NEXT_PUBLIC_API_KEY=<your-api-key>
```
When you create an account, the setup page will provide you with your API key.
Add Build Script to package.json

Add the following script to your package.json:
```
"scripts": {
    "nextlevelbuild": "node ./node_modules/nextlevelpackage/cli.js"
}
```
Run this build script instead of 'npm next build' to track metrics in the dashboard:
```
npm run nextlevelbuild
```
Navitage to your NextLevel dashboard to view tracked metrics!

Tracked Metrics

Metrics displayed on the page include:

Time to First Byte:
- measures the time taken from a user's request to the first byte of data received from the server, indicating server responsiveness.
Largest Contentful Paint:
- gauges the time it takes for the largest visible content element on a webpage to load, impacting user perception of loading speed.
First Contentful Paint:
- tracks the time from page load to when the first piece of content is rendered on the screen, marking the start of the visual loading process.
First Input Delay:
- measures the delay between the user's first interaction with the page and the browser's response, reflecting input responsiveness.
Interaction to Next Paint:
- evaluates the time from user interaction to the next visual update, assessing how quickly a page responds to user inputs.
Cumulative Layout Shift:
- quantifies the total of all individual layout shifts that occur during the entire lifespan of the page, indicating visual stability.
Build Time:
- refers to the duration taken to compile and bundle code and assets into a deployable format during the development process.
Bundle Size:
- denotes the total size of all the compiled assets sent to the client, affecting load times and overall performance.

Keywords

FAQs

What is nextlevelpackage?

Is nextlevelpackage popular?

Is nextlevelpackage well maintained?

Package last updated on 23 Jul 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install