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:

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, it starts with your own subdomain instead of t.foresite.dev.

Pages Router

Add the same Script to pages/_app.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, Nuxt, SvelteKit and React Router and Remix.

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:

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

See 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. Add the two DNS records under your domain in Vercel's Domains settings, or wherever your DNS is hosted. No code.
• Self-hosted proxy. Two small route handlers forward Foresite's requests through your own domain.