# Install Foresite on Next.js and Vercel

## App Router

Add the Tracking Script to your root layout, `app/layout.tsx`, with Next.js's `Script` component:

```tsx
import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script src="https://t.foresite.dev/s/YOUR_SITE_ID.js" />
    </html>
  )
}
```

Use the address from your own Foresite line (**Settings → Install**). If you set up a [custom domain](https://foresite.dev/docs/custom-domain), it starts with your own subdomain instead of `t.foresite.dev`.

## Pages Router

Add the same `Script` to `pages/_app.tsx`:

```tsx
import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://t.foresite.dev/s/YOUR_SITE_ID.js" />
    </>
  )
}
```

Deploy, and the **Installation Check** in **Settings → Install** turns green with your first pageview.

Other frameworks on Vercel have their own guides: [Astro](https://foresite.dev/docs/astro), [Nuxt](https://foresite.dev/docs/nuxt), [SvelteKit](https://foresite.dev/docs/sveltekit) and [React Router and Remix](https://foresite.dev/docs/react-router).

## What gets counted

- **Page changes.** Next.js loads the script once and switches pages without reloading; Foresite counts each new path as a pageview automatically. Changing only the query string, such as a filter or a tab, doesn't count as a new page.
- **Not `next dev`.** Foresite ignores `localhost`, so your own testing doesn't show up.
- **Not preview deployments.** Foresite only accepts pageviews from your site's address, so visits to `*.vercel.app` preview URLs aren't counted. If your site lives on a `vercel.app` address, enter that exact address as your site.

## Custom events

To count signups, purchases and other actions, call `window.foresite()` from a Client Component, for example when a form is sent:

```tsx
window.foresite?.('signup', { props: { plan: 'pro' } })
```

See [custom events](https://foresite.dev/docs/custom-events), which includes a TypeScript declaration for `window.foresite`.

## Ad blockers

Some ad blockers block analytics scripts by their address. On Vercel you have two ways around that:

- **[Custom domain](https://foresite.dev/docs/custom-domain).** Add the two DNS records under your domain in Vercel's **Domains** settings, or wherever your DNS is hosted. No code.
- **[Self-hosted proxy](https://foresite.dev/docs/proxy).** Two small route handlers forward Foresite's requests through your own domain.

## Coming from Vercel Web Analytics

See [how Foresite compares with Vercel Web Analytics](https://foresite.dev/vs/vercel-analytics), on price and features, and how to switch.