docs

Appearance

The Reshepe Web Vitals package for Next.js lets you monitor Core Web Vitals metrics real-time with ease in your Next.js applications.

Installation ​

Install the Next package using your preferred package manager:

bash
npm i @reshepe-web-vitals/next

Usage ​

Import and render the WebVitals component in your RootLayout (e.g. app/layout.tsx):

tsx
import { ReactNode } from 'react'
import { WebVitals } from '@reshepe-web-vitals/next';

export default function RootLayout({
    children,
}: {
    children: ReactNode;
}) {
    return (
        <html lang="en">
            <body>
                {children}
                <WebVitals apiKey="YOUR-RESHEPE-PUBLIC-API-KEY" />
            </body>
        </html>
    );
}

To get your Reshepe public API key:

  1. Create (or select) a project in the Reshepe dashboard.
  2. Go to Settings → API Keys.
  3. Copy the Public API Key and use it in the api-key prop.

you can follow instructions to get your public API key here

Development Mode ​

Prevent data from being sent during development by adding the development prop:

tsx
<WebVitals apiKey="YOUR-RESHEPE-PUBLIC-API-KEY"
           development // />

Soft Navigations ​

Enable monitoring of SPA navigations by adding the reportSoftNavigation prop:

tsx
<WebVitals apiKey="YOUR-RESHEPE-PUBLIC-API-KEY"
           reportSoftNavigation // />

Toolbar ​

The Toolbar component provides an on-page overlay for live metric inspection (development only). Import and render it alongside WebVitals:

tsx
import { ReactNode }          from 'react'
import { WebVitals, Toolbar } from '@reshepe-web-vitals/next'

export default function RootLayout({
    children,
}: {
    children: ReactNode
}) {
    return (
        <html lang="en">
            <body>
                {children}
                <WebVitals apiKey="YOUR-RESHEPE-PUBLIC-API-KEY" />
                <Toolbar />
            </body>
        </html>
    )
}