Start my dashboard

How to Add Orbit Analytics to a Next.js Site

Next.js gives you a built-in Script component specifically for third-party scripts like Orbit's, so you don't need a raw <script> tag or a separate tag manager. The setup lives in one file and applies to every route automatically.

Setup steps

  1. Open your root layoutIn the App Router, that's app/layout.tsx; in the Pages Router, it's pages/_app.tsx or a custom _document.tsx — wherever <head> content shared across every route is defined.
  2. Import Script from 'next/script'Next.js's built-in Script component manages script loading and avoids the hydration warnings a raw <script> tag can trigger inside a React tree.
  3. Add the Orbit script with the right strategySet src to https://orbitanalytics.app/script.js, pass your data-website-id as a prop, and set strategy="afterInteractive" so tracking loads without blocking the initial render.
  4. Deploy and confirm in the dashboardPush to production, visit your live site, and confirm the visit appears as a real-time visitor in your Orbit dashboard within a few seconds.

Frequently asked questions

Does this work with both the App Router and Pages Router?

Yes — the mechanism is the same, only the file location changes: app/layout.tsx for the App Router, pages/_app.tsx or _document.tsx for the Pages Router.

Will next/script's afterInteractive strategy delay tracking?

It loads the script slightly after hydration rather than immediately, but this still registers within the first second on most pages — a good balance between accurate tracking and not blocking render.

Does this work with static exports (output: 'export')?

Yes — since the script tag just needs to appear in the shipped HTML, it works the same whether you're using SSR, SSG, ISR, or a fully static export.

Do I need to update my Content Security Policy?

If your app sets a script-src CSP header, you'll need to add orbitanalytics.app to the allowlist, or the browser will silently block the tracking script.

Other integrations

GatsbyAstroHugo

Built for teams like yours

SaaS foundersMost SaaS founders already have a product analytics tool wired into the app. What's usually missing

See it on your own site

Free for 1 website, no card required.

Start my dashboard