Skip to 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).

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>
  );
}