docs

Appearance

@reshepe-web-vitals/next ​

next reshepe web vitals package

monitor real user experience (RUM) and web vitals data

installation ​

simply install @reshepe-web-vitals using your package manager

bash
npm i @reshepe-web-vitals/next

usage ​

import component inside your layout file

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

export default function RootLayout({
    children,
}: {
    children: ReactNode;
}) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
            <WebVitals apiKey={'your-reshepe-public-api-key'} />
        </html>
    );
}

api key ​

to get your reshepe public api key create project and go to settings

reshepe-settings

where you can find reshepe api keys

reshepe-api-keys

development mode ​

if you don't want to send data to reshepe while you are developing your application you can use development mode by adding development prop to component

it will prevent data from being sent to reshepe server

tsx
<WebVitals apiKey={'your-reshepe-public-api-key'}
           development={true} />

soft navigations ​

if you want to monitor web vitals data for soft navigations you can use report-soft-navigation prop

jsx
<WebVitals apiKey={'your-reshepe-public-api-key'}
           reportSoftNavigation={true} />

toolbar ​

toolbar is a handy helper for developers to monitor web vitals data

toolbar

we keep it as a separate export to not bloat your bundle size

to enable it you need to add import in your main.tsx file

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

export default function RootLayout({
    children,
}: {
    children: ReactNode;
}) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
            <WebVitals apiKey={'your-reshepe-public-api-key'} />
            <Toolbar />
        </html>
    );
}