Add Privatus Analytics to Nextra

Add cookieless analytics to a Nextra 4 docs site with next/script in the App Router root layout, with page navigation counted automatically.

# Add Privatus Analytics to Nextra

> Add cookieless analytics to a Nextra 4 docs site with next/script in the App Router root layout, with page navigation counted automatically.

Nextra 4 uses the Next.js App Router. Use `next/script` in the root layout,
`app/layout.jsx`:

```jsx
import { Head } from 'nextra/components'
import Script from 'next/script'
// ...

export default async function RootLayout({ children }) {
  return (
    <html lang="en" dir="ltr" suppressHydrationWarning>
      <Head />
      <body>
        {/* Layout, Navbar and Footer as in your current file */}
        {children}
        <Script defer src="https://privatusstats.com/js/pa.js" data-site="pa_YOURSITEID" data-modules="engage,auto,vitals,clicks,ask" strategy="afterInteractive" />
      </body>
    </html>
  )
}
```

Keep the rest of your layout as it is and add the `<Script>` inside
`<body>`. Nextra's `<Head>` component takes extra head tags as children, but
`next/script` is the supported way to load a script in Next.js.

Older Nextra versions with `theme.config.jsx` and the Pages Router: render the
same `<Script>` in `pages/_app.jsx`. See the [Next.js page](/docs/install/nextjs).

Navigation uses `history.pushState`, which the tracker follows with its
default `data-spa="auto"`. See [single-page apps](/docs/tracker/spa).

Visa som Markdown

Nextra 4 uses the Next.js App Router. Use next/script in the root layout, app/layout.jsx:

jsx

import { Head } from 'nextra/components'
import Script from 'next/script'
// ...

export default async function RootLayout({ children }) {
  return (
    <html lang="en" dir="ltr" suppressHydrationWarning>
      <Head />
      <body>
        {/* Layout, Navbar and Footer as in your current file */}
        {children}
        <Script defer src="https://privatusstats.com/js/pa.js" data-site="pa_YOURSITEID" data-modules="engage,auto,vitals,clicks,ask" strategy="afterInteractive" />
      </body>
    </html>
  )
}

Keep the rest of your layout as it is and add the <Script> inside <body>. Nextra's <Head> component takes extra head tags as children, but next/script is the supported way to load a script in Next.js.

Older Nextra versions with theme.config.jsx and the Pages Router: render the same <Script> in pages/_app.jsx. See the Next.js page.

Navigation uses history.pushState, which the tracker follows with its default data-spa="auto". See single-page apps.