Documentation

Next.js installation guide

For the App Router, use the local browser package from a client component, then render Analytics once inside the body of your existing root layout:

// app/analytics.tsx
'use client';
import { useEffect } from 'react';
import { init } from 'analyticfast';
export function Analytics() {
  useEffect(() => {
    init({ siteId: 'YOUR_SITE_ID', host: 'https://YOUR_ANALYTICS_HOST' });
  }, []);
  return null;
}

Alternatively, use Next.js Script in the root layout with your real values:

import Script from 'next/script';
// Inside your existing layout body:
<Script src="https://YOUR_ANALYTICS_HOST/js/script.js"
  data-website-id="YOUR_SITE_ID" strategy="afterInteractive" />

Choose one method. For the Pages Router put the same component in pages/_app. Do not add manual pageviews for router changes. Initialize after required consent. Read attribution IDs on the client before checkout and pass them to your server action; keep payment credentials on the server and validate checkout inputs.

Official references, checked 2026-10-26: Next.js Script, React effects.