---
title: Next.js
description: 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).
url: https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/nextjs/
product: rum
feature: Browser SDK
feature_id: browser-sdk
feature_identifier: rum/browser-sdk
last_updated: '2026-10-21'
---
# 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).
## What you need
Selecting the **SendRumData** preset makes the API key public, so you cannot combine it with other role presets. Conversely, a key with the **SendData** preset must remain secret, and carries no RUM permissions.
* **Source-map key**: a separate Team key with the **SourceMapping** preset. The [RUM CLI](https://coralogix.com/docs/user-guides/rum/cli/rum-cli.md#authentication-and-permissions) uses it at build time to upload source maps.
## 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 (
{children}
);
}
```