1 minute

Install Web-Tracking.eu on Next.js

Use the built-in Script component for App Router or Pages Router. The script auto-tracks SPA route changes via History API.

1

App Router (Next.js 13+)

Add the Script component to your root app/layout.tsx:

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://web-tracking.eu/t.js?site=YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
2

Pages Router

Edit pages/_app.tsx (or .js):

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

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://web-tracking.eu/t.js?site=YOUR_SITE_ID"
        strategy="afterInteractive"
      />
    </>
  );
}
3

Replace the site ID

Change YOUR_SITE_ID to your dashboard ID. For multi-environment setups, store it in NEXT_PUBLIC_WEB_TRACKING_SITE and reference it via process.env.NEXT_PUBLIC_WEB_TRACKING_SITE.

Verify it's working

  1. Open your site in a private/incognito window.
  2. Visit any page on the site.
  3. Open the Web-Tracking.eu dashboard for this site.
  4. The Realtime view should show your visit within 5–10 seconds.

Having trouble?

  • No data showing: Confirm the script is in the page source (View Source > search web-tracking.eu/t.js).
  • Wrong site ID: Double-check the ID matches the one in your dashboard. IDs are case-sensitive.
  • Ad blocker: Web-Tracking.eu is privacy-friendly, but some aggressive blockers still hide it. Test in a fresh browser.
  • Caching: Many platforms cache the page HTML. Purge your cache after install.
  • Still stuck? Email hello@web-tracking.eu with your site URL.
← Back to install hub