# Install GeoEngage on Next.js

> Add the GeoEngage tag to a Next.js root layout or custom document as a plain script, so it runs before the page paints.

## App Router

Add the tag to the `<head>` of your root layout, `app/layout.tsx` (or `.jsx`):

```tsx title="app/layout.tsx"
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script
          src="https://cdn.geoengage.app/ge.js"
          data-api-key="YOUR_API_KEY"
          data-require-consent="false"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}
```

Use a plain `<script>` here, not `next/script`. Its default `afterInteractive` strategy and `lazyOnload` both run the tag after the page has painted, which is exactly what GeoEngage has to avoid.

> [!NOTE]
> Next.js's ESLint config warns about synchronous scripts (`@next/next/no-sync-scripts`). Here that's intentional. To silence it, put `{/* eslint-disable-next-line @next/next/no-sync-scripts */}` on the line above the tag.

## Pages Router

Add the tag to `pages/_document.tsx`, creating the file if your app doesn't have one:

```tsx title="pages/_document.tsx"
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <script
          src="https://cdn.geoengage.app/ge.js"
          data-api-key="YOUR_API_KEY"
          data-require-consent="false"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```

## Navigation

Nothing to set up. Next.js changes routes through the browser's History API, which the widget follows: on every route change it removes the previous page's actions, checks your rules again and records a page view. See [Single-page apps](https://geoengage.app/docs/widget/single-page-apps).

## Check it's working

Deploy, open your site in a private window, then follow [the checks](https://geoengage.app/docs/install#check-its-working).

---

Source: https://geoengage.app/docs/install/nextjs