Skip to main content

Instrumenting NextJS Applications for RUM Using Nginx

Overview​

This guide explains how to instrument an NextJS application for Real User Monitoring (RUM) and route browser RUM data through Nginx to the Motadata backend.

In this setup:

  • The NextJS application captures user experience data using the Motadata RUM SDK.
  • Nginx forwards the RUM payloads to Motadata using a reverse proxy route (/api/v2/rum).

Prerequisites​

Ensure the following requirements are met before proceeding:

  • Motadata ObserveOps (formerly known as AIOps) has a valid RUM license.
  • The Nginx server must be able to communicate with the Motadata backend over TCP port 9477, with connectivity available in both directions.
  • Access to the Next.js project directory is available.
  • Permission is granted to modify the Apache SSL configuration file (VirtualHost configuration).

Configuration Steps​

Step 1: Create a RUM Application in Motadata ObserveOps (formerly known as AIOps)

  1. Go to Settings > Real User Monitoring > Applications and click the Create Application button.
  2. Provide all the required information, selecting Nginx as the deployment type.
  3. Click the Register Application button. This will display the RUM initialization snippet on the screen.
  4. Copy the generated RUM initialization code snippet.

From the snippet, note the following values:

  • applicationId
  • clientToken
  • RUM endpoint path (/api/v2/rum)

Step 2: Configure Nginx Reverse Proxy for RUM

Step 2.1: Open Nginx Config

Edit your Nginx site configuration file.

Example:

sudo vi /etc/nginx/sites-available/default
info

Use your actual Nginx configuration file path if different.

Step 2.2: Add Proxy Rules for RUM

Add the following location block:

location /api/v2/rum {
    add_header Access-Control-Allow-Headers "*" always;
    proxy_pass https://172.16.14.71:9477;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

After configuring this, Nginx forwards the RUM payloads received from the browser to the Motadata backend.

Step 3: Reload Nginx

Validate and reload the Nginx configuration:

sudo nginx -t
sudo systemctl reload nginx

Step 4: Install the RUM SDK in Next

An active internet connection is required during the initial installation of the SDK package. Open terminal and navigate to your Vue project directory and run the following command:

npm install @motadata365/browser-rum
info

Internet access will also be required whenever an SDK is updated and needs to be applied.

Step 5: Create the RUM Initialization Component

Create motadata.tsx file inside src/components folder of your Next.js project and add below code. This component will initialize the RUM SDK and handle the user experience tracking.

Example configuration (replace with your generated values):

File: src/components/motadata.tsx

'use client'
 
import { motadataRum } from '@motadata365/browser-rum';
 
motadataRum.init({
  applicationId: '4',
  clientToken: 'pubabb4e0e3d262914ac13e8c73fe34ca1f',
  site: 'https://motadata.com',
  service: 'next_nginx@8.2.3:UAT',
  env: 'UAT',
  version: '8.2.3',
  sessionSampleRate: 100,
  trackUserInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  defaultPrivacyLevel: 'allow',
  trackBfcacheViews: true
});
 
export default function MotadataInit() {
  return null;
}

Step 6: Integrate the RUM Initialization Component in the Root Layout

To apply RUM tracking across your entire Next.js application, integrate the RUM initialization component into the root layout.

File: app/layout.tsx

Import motadata file in app/layout.tsx file.

import MotadataInit from '@/components/motadata';

Then, Add <MotadataInit /> at the root of your app (inside <body>) to initialize tracking across your entire application.

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en-US" dir="ltr">
      <body suppressHydrationWarning={true}>
        <MotadataInit />
        ...
      </body>
    </html>
  )
}

Step 7: Build and Deploy the Next.js Application

Once you have configured the RUM SDK, proceed to build and deploy the Next.js application.

Build the application with the following command:

npm run build

After the build completes, start the application with:

npm start

Restart Nginx if required:

sudo systemctl restart nginx

Once the above configuration is completed, the onboarded application may take a few minutes to reflect in the Rum Explorer, displaying live user insights and performance diagnostics.