Cronitor RUM Next.js integration

Important: As of version 0.2.0 of this package only Next.js 13 or later will be supported. Version 0.5.0 adds support for Next.js 14-16.

Cronitor Real User Monitoring integration for Next.js.

Quickstart

Install

Run the following command to install in your project:

npm install @cronitorio/cronitor-rum-nextjs

Or with yarn:

yarn add @cronitorio/cronitor-rum-nextjs

Basic usage

You can now import, and use the Cronitor hook on your project.

// ./pages/_app.js

import { useCronitor } from '@cronitorio/cronitor-rum-nextjs';

function CustomApp({ Component, pageProps }) {
  // Load Cronitor only once during the app lifecycle
  useCronitor('YOUR_CLIENT_KEY');

  return <Component {...pageProps} />;
}

export default CustomApp;

Debug-mode

When developing in localhost, Cronitor does not send events to avoid using your quota.

You can enable debug mode to send events when testing things locally. It will also log messages to console.

// ./pages/_app.js

import { useCronitor } from '@cronitorio/cronitor-rum-nextjs';

function CustomApp({ Component, pageProps }) {
  
  useCronitor('YOUR_SITE_ID', {
    debug: true,
    environment: "staging",
    includeURLQueryParams: ["tab", "pageNum"]
  });

  return <Component {...pageProps} />;
}

export default CustomApp;

Changelog

0.5.0

• Add official support for Next.js 14, 15, and 16.
• Add support for React 19.
• Update TypeScript to version 5.

0.4.0

• Update cronitor-rum lib.

0.3.0

• Update cronitor-rum-js lib.

0.2.1

• Update cronitor-rum-js lib.

0.2.0

• Support new Next.js 13 'app' directory and client-only components.

0.1.0

• Initial open source release.

Security Disclosure

If you discover any issue regarding security, please disclose the information responsibly by sending us an email at support@cronitor.io. Do NOT create a Issue on the GitHub repo.

Contributing

Please check for any existing issues before openning a new Issue. If you'd like to work on something, please open a new Issue describing what you'd like to do before submitting a Pull Request.

License

See LICENSE.