Simple Analytics for React and Next.js

Step-by-step

Get your tracking code
Sign up free, add your domain, copy the 16-character tracking code, and replace YOURCODE in the snippets below.

Next.js App Router (recommended)

Use the built-in next/script with strategy="afterInteractive":

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://hitcounters.com/api/tracker.js?code=YOURCODE"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Next.js Pages Router

Add the script tag directly to _document.tsx:

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        <script async src="https://hitcounters.com/api/tracker.js?code=YOURCODE" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Vite or Create React App

Add the script tag to index.html:

<!-- index.html (Vite or CRA) -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
    <script async src="https://hitcounters.com/api/tracker.js?code=YOURCODE"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Verify
Build and serve your app, load any page, then go to your HitCounters Sites page and click Verify. The tracker auto-detects the domain — no extra config.

SPA route changes (recommended for Next.js / Vite SPAs)

The tracker auto-records the first page load. For client-side route changes, fire hcEvent('pageview') on each navigation. Mount this component once at the root:

// SPA route-change tracking (Next.js App Router)
'use client';
import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

export function HitCountersRouteTracker() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  useEffect(() => {
    // Tracker auto-records first hit; for SPA navigations, fire a custom event
    if (typeof window !== 'undefined' && (window as any).hcEvent) {
      (window as any).hcEvent('pageview');
    }
  }, [pathname, searchParams]);
  return null;
}

Then add a custom Event goal named pageview to count SPA navigations as conversions, or just use it to verify route tracking is working.

Tracking conversions / events

Anywhere in your app:

// Anonymous user clicked 'Sign up'
window.hcEvent?.('signup');

// User completed a purchase
window.hcEvent?.('purchase', 49.99);

// TypeScript types (optional):
declare global {
  interface Window {
    hcEvent?: (name: string, value?: number) => void;
  }
}

Then define matching Event goals on the Goals page.

FAQ

Is the tracker SSR-safe?

Yes. next/script handles SSR correctly. For raw <script> tags, they only execute in the browser anyway.

Will it work with React Router (non-Next.js)?

Yes. Wire hcEvent('pageview') into a useEffect that depends on useLocation() from React Router.

Does it interfere with React StrictMode?

No. The tracker debounces against duplicate page loads, so StrictMode's double-renders won't inflate your stats.

CSP blocking the script?

Allow script-src https://hitcounters.com in your Content Security Policy.

Step-by-step

SPA route changes (recommended for Next.js / Vite SPAs)

Tracking conversions / events

FAQ

Ready to track your React/Next.js site?