Add Datrika to Next.js

Add the script to your root layout with the Script component from next/script.

Replace YOUR_SITE_ID with your site ID in Datrika. Copy the script with the ID filled in from your site settings, on the General tab.

App Router

Add the Script component to your root layout, app/layout.tsx.

app/layout.tsx

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.datrika.app/da.js"
          data-datrika
          data-site-id="YOUR_SITE_ID"
        />
      </body>
    </html>
  );
}

Pages Router

Using the pages folder? Add the same component to pages/_app.tsx.

pages/_app.tsx

import type { AppProps } from 'next/app';
import Script from 'next/script';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        src="https://cdn.datrika.app/da.js"
        data-datrika
        data-site-id="YOUR_SITE_ID"
      />
      <Component {...pageProps} />
    </>
  );
}

Datrika tracks regular page changes in your app on its own. It misses only router.replace navigations, which replace the address instead of adding one, and hash-based routing with # in the URL.

Done? Open your site in a browser - the setup guide in Datrika picks up the first visit and takes you to your dashboard.