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

# Next.js

> Install Highseat in a Next.js app with the highseat package, on the App Router or the Pages Router.

The `highseat` package renders the tracker's script tag and gives you a typed `track()`. The tracker loads from `cdn.highseat.com`, so the install needs no secret and no server code.

Replace `YOUR_SITE_ID` with your site's id, which starts with `site_`. **Site settings › Installation** in the dashboard shows it, with this code already filled in.

<Steps>
  <Step title="Install the package">
    ```bash theme={null}
    npm install highseat
    ```
  </Step>

  <Step title="Add it to your root layout">
    ```tsx app/layout.tsx highlight={1,8} theme={null}
    import { Highseat } from "highseat/next"

    export default function RootLayout({ children }: { children: React.ReactNode }) {
      return (
        <html lang="en">
          <body>
            {children}
            <Highseat site="YOUR_SITE_ID" />
          </body>
        </html>
      )
    }
    ```
  </Step>
</Steps>

Deploy, then [verify your install](/docs/install/verify). Highseat counts only your site's own domain, so a visit to `localhost` does not complete the install.

## Pages Router

Render it in pages/\_app.tsx instead of the root layout.

```tsx pages/_app.tsx theme={null}
import type { AppProps } from "next/app"
import { Highseat } from "highseat/next"

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Highseat site="YOUR_SITE_ID" />
    </>
  )
}
```

## Use an environment variable

Read the site id from NEXT\_PUBLIC\_HIGHSEAT\_SITE, set for the build: Next.js writes it into the page.

```dotenv .env theme={null}
NEXT_PUBLIC_HIGHSEAT_SITE=YOUR_SITE_ID
```

```tsx theme={null}
<Highseat />
```

`NEXT_PUBLIC_HIGHSEAT_SITE` is a build-time variable. Next.js writes its value into the page during `next build`, so set it in your host's environment, such as the project settings on Vercel, before the deploy. A variable added after a build takes effect with the next deploy.

## Pages that are not found

Next.js loads a missing route as a full page, even when a visitor follows a `<Link>` to it, so the server answers with a 404 status. The tracker reads that status and records a `404` event with no code from you. Browsers based on Chromium, such as Chrome and Edge, report the status; Firefox and Safari do not.

## Content Security Policy

Allow the ingest host in script-src and connect-src.

```text theme={null}
script-src https://cdn.highseat.com;
connect-src https://cdn.highseat.com;
```

## Without the package

Use the package in a Next.js app rather than a script tag in a layout. A `<script>` tag that React creates in the browser never runs, so a hand-written tag can fail with no error. `<Highseat />` adds the tag from outside React.

## Next steps

<Card title="Track events" icon="mouse-pointer-click" href="/docs/events">
  Send signups and purchases with a typed `track()`.
</Card>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.