Documentation - v6.31.0
    Preparing search index...

    Module @datadog/browser-rum-nextjs

    RUM Browser Monitoring - NEXTJS integration

    This package provides NextJS integration for Datadog Browser RUM, supporting both the App Router and Pages Router.

    Both routers require Next.js v15.3+, which supports the instrumentation-client file convention.

    App Router Usage

    Initialize the Datadog RUM SDK with the nextjsPlugin and re-export onRouterTransitionStart so Next.js can call it on client-side navigations:

    import { datadogRum } from '@datadog/browser-rum'
    import { nextjsPlugin, onRouterTransitionStart } from '@datadog/browser-rum-nextjs'

    export { onRouterTransitionStart }

    datadogRum.init({
      applicationId: '<APP_ID>',
      clientToken: '<CLIENT_TOKEN>',
      site: 'datadoghq.com',
      plugins: [nextjsPlugin()],
    })

    // app/layout.tsx
    import { DatadogAppRouter } from '@datadog/browser-rum-nextjs'

    export default function RootLayout({ children }: { children: React.ReactNode }) {
      return (
        <html lang="en">
          <body>
            <DatadogAppRouter />
            {children}
          </body>
        </html>
      )
    }

    Pages Router Usage

    Initialize the Datadog RUM SDK with the nextjsPlugin. The onRouterTransitionStart export is not needed for Pages Router.

    import { datadogRum } from '@datadog/browser-rum'
    import { nextjsPlugin } from '@datadog/browser-rum-nextjs'

    datadogRum.init({
      applicationId: '<APP_ID>',
      clientToken: '<CLIENT_TOKEN>',
      site: 'datadoghq.com',
      plugins: [nextjsPlugin()],
    })

    // pages/_app.tsx
    import type { AppProps } from 'next/app'
    import { DatadogPagesRouter } from '@datadog/browser-rum-nextjs'

    export default function MyApp({ Component, pageProps }: AppProps) {
      return (
        <>
          <DatadogPagesRouter />
          <Component {...pageProps} />
        </>
      )
    }

    Settings

    On This Page

    RUM Browser Monitoring - NEXTJS integrationApp Router UsagePages Router Usage