Next.js

The Coralogix RUM SDK is a library (plugin) for Next.js that provides telemetry instrumentation. Learn how to integrate with Coralogix's Real User Monitoring (RUM).

Prerequisites

Deploy our RUM Integration Package. This includes creating your RUM API key, which is required for the Browser SDK setup.

Installation

Changed in 2.1.0

Create a file named coralogix.tsx in the app folder and include the following code:

For SDK version 2.1.0 and above:

'use client';
import { CoralogixRum } from '@coralogix/browser';

export default function CoralogixRumInit() {
  CoralogixRum.init({
    environment: 'test',
    application: 'my-app',
    version: '1.0.0',
    public_key: 'my-key-123',
    coralogixDomain: 'EU2',
  });

  return null;
}

For SDK version below 2.1.0:

'use client';
import { useEffect } from 'react';

export default function CoralogixRumInit() {
  useEffect(() => {
  initializeCoralogixRUM();
  }, []);

return null;
}

export const initializeCoralogixRUM = async () => {
  const { CoralogixRum } = await import('@coralogix/browser');

  CoralogixRum.init({
  environment: 'test',
  application: 'my-app',
  version: '1.0.0',
  public_key: 'my-key-123',
  coralogixDomain: 'EU2',
});
};

In your main tsx file, call CoralogixRumInit.

import CoralogixRumInit from "@/app/coralogix";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  return (
      <html lang="en">
      <body>
      <CoralogixRumInit/>
      {children}
      </body>
      </html>
  );
}

Need help? Contact Support.

What's new? Find out here.

LLM? Read llms.txt.

Previous NPM browser SDK installation guide

Next SvelteKit