Add RUM to your Next.js site

Installing Cronitor RUM on your Next.js website is simple - all you have to do is add our analytics snippet.

The analytics snippet is a small piece of code that runs on your website, collecting the metrics necessary to power your dashboard and provide performance insights. It’s cookieless and privacy-oriented.

Install the analytics script

Installing the analytics script on your Next.js based website is super simple.

We’re going to be using the official Cronitor RUM Next.js integration. It includes a React hook that will automatically track navigation changes for Next.js apps.

First, install the library 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. Don’t forget to replace YOUR_CLIENT_KEY with your Site’s client key as shown to you in your Cronitor dashboard.

// ./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_CLIENT_KEY', {
    debug: true
  });

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

export default CustomApp;

That’s all you need to add analytics to your NextJS project.

Recording custom events

By default, Cronitor automatically tracks pageviews when your Next.js router comples a navigation change. But you can also record custom events for pretty much anything.

For example, here’s how you can record a SignupNewsletter event:

import * as Cronitor from "@cronitorio/cronitor-rum";
import { useState } from "react";

export function SignupForm(props) {
  const [email, setEmail] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();

    // Handle form submit
    alert(`Handling newsletter signup: ${email}`);

    // Record custom event on submit
    Cronitor.track("SignupNewsletter");
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input
          type="text"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

As these events get triggered, they should show up on your analytics dashboard under the “Custom events” section.

Check your installation

After you have added our analytics script to your website, you should be able to see pageviews show up in the dashboard within a minute of the visitors coming into your website.

Need help? Check out common questions or reach out to us!