> ## Documentation Index
> Fetch the complete documentation index at: https://tinyanalytics.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js Analytics Integration

> Install tinyanalytics with next/script in an App Router or Pages Router layout and track Next.js client-side navigation automatically.

To add tinyanalytics to a **Next.js** app, load the tracking script with Next's `next/script` component in your root layout so it runs on every page. Client-side navigation between routes is tracked automatically, so you don't need to wire anything into the router.

## Before you start

* A tinyanalytics site. If you don't have one yet, follow the [Quickstart](/docs/tinyanalytics-quickstart).
* Your site's numeric **site ID**, from **Settings → Tracking** in your dashboard.

## Add the tracking script

<Tabs>
  <Tab title="App Router">
    Add a `<Script>` to your root layout, `app/layout.tsx`:

    ```tsx app/layout.tsx theme={null}
    import Script from "next/script";

    export default function RootLayout({ children }: { children: React.ReactNode }) {
      return (
        <html lang="en">
          <body>
            {children}
            <Script
              src="https://dash.tinyanalytics.io/script.js"
              data-site-id="YOUR_SITE_ID"
              strategy="afterInteractive"
            />
          </body>
        </html>
      );
    }
    ```
  </Tab>

  <Tab title="Pages Router">
    Add the same `<Script>` to `pages/_app.tsx`:

    ```tsx pages/_app.tsx theme={null}
    import Script from "next/script";
    import type { AppProps } from "next/app";

    export default function App({ Component, pageProps }: AppProps) {
      return (
        <>
          <Component {...pageProps} />
          <Script
            src="https://dash.tinyanalytics.io/script.js"
            data-site-id="YOUR_SITE_ID"
            strategy="afterInteractive"
          />
        </>
      );
    }
    ```
  </Tab>
</Tabs>

<Tip>
  Replace `YOUR_SITE_ID` with your real site ID, and copy the full snippet from **Settings → Tracking** if you've toggled any options — pass each `data-*` attribute as a prop on `<Script>`.
</Tip>

## Client-side navigation is tracked automatically

Next.js renders route changes on the client, and tinyanalytics records each one as a new pageview by default (`data-track-spa`). You don't need to hook into `next/navigation` or the router — moving between pages is captured for you. See [Track single-page apps](/docs/configure-tinyanalytics-tracking-script#track-single-page-apps) if you want to change this.

## Verify

Deploy or run your app, open it in a browser, then check **Realtime** in your dashboard for your visit. See [Verify your setup](/docs/verify-tinyanalytics-installation) for the full check.

<Check>
  Your install is working when your own visit appears in **Realtime** in your dashboard.
</Check>

## Related

<Columns cols={2}>
  <Card title="Install on React" icon="react" href="/docs/integrations/react-analytics">
    A plain React or Vite app instead.
  </Card>

  <Card title="Configure the tracking script" icon="sliders" href="/docs/configure-tinyanalytics-tracking-script">
    Every `data-*` option, passed as a `<Script>` prop.
  </Card>

  <Card title="Track custom events" icon="hand-pointer" href="/docs/custom-event-tracking">
    Send events from your components.
  </Card>

  <Card title="Verify your setup" icon="circle-check" href="/docs/verify-tinyanalytics-installation">
    Confirm tracking works.
  </Card>
</Columns>


## Related topics

- [React Analytics Integration](/docs/integrations/react-analytics.md)
- [Install tinyanalytics in 5 Minutes](/docs/tinyanalytics-quickstart.md)
- [Install tinyanalytics on Any Website](/docs/integrations/install-website-analytics.md)
