---
title: "Install on Next.js"
description: "Add XPmetric to Next.js App Router or Pages Router using next/script or a layout head tag."
source: "https://xpmetric.com/docs/install/nextjs"
---
Add XPmetric to Next.js so every route sends pageviews to your dashboard.

<TokenCallout />

## Tracking snippet

<TrackingSnippet />

## App Router (recommended)

Add to `app/layout.tsx` using `next/script`:

```tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://xpmetric.com/p.js"
          data-site="YOUR_SITE_TOKEN"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}
```

Replace `YOUR_SITE_TOKEN` with your token from **Settings → Sites → Get Script**.

## Pages Router

Add the same `<Script>` tag inside `<Head>` in `pages/_document.tsx`:

```tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <Script
            src="https://xpmetric.com/p.js"
            data-site="YOUR_SITE_TOKEN"
            strategy="afterInteractive"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```

## Verify

1. Deploy or run locally and visit any page.
2. Open your site dashboard — you should see a pageview in the live feed within ~60 seconds.

## Troubleshooting

If pageviews never appear, your Content-Security-Policy may block `p.js`. See [CSP troubleshooting](/docs/troubleshooting/csp).
