Skip to main content

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​

  1. 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',
    });
    };

  2. 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>
  );
}
Was this page helpful?
Need help? Contact Support.
What's new? Find out here.
LLM? Read llms.txt.
On this page