Install guide · framework · ~3 min

Install Admaxxer on Next.js

npm i admaxxer, call in _app or layout.

For Next.js we recommend the npm package — it is SSR-safe (initAdmaxxer no-ops on the server) and gives you type safety. Both the Pages Router and the App Router are supported.

Steps

  1. 1 Install the package

    Add admaxxer to your project.

    bash
    npm i admaxxer

  2. 2 Initialize in _app.tsx (Pages Router)

    Create pages/_app.tsx (or edit yours) and call initAdmaxxer at module top-level. The function no-ops on the server, so this is safe.

    pages/_app.tsx tsx
    import type { AppProps } from 'next/app';
import { initAdmaxxer } from 'admaxxer';

initAdmaxxer({ websiteId: 'YOUR_WEBSITE_ID', domain: 'yourdomain.com' });

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

  3. 3 Or initialize in app/layout.tsx (App Router)

    For the App Router, create a client component and import it from the root layout.

    app/admaxxer-init.tsx tsx
    'use client';
import { useEffect } from 'react';
import { initAdmaxxer } from 'admaxxer';

export function AdmaxxerInit() {
  useEffect(() => {
    initAdmaxxer({ websiteId: 'YOUR_WEBSITE_ID', domain: 'yourdomain.com' });
  }, []);
  return null;
}

  4. 4 Verify the install

    Load any public page on your site in a fresh browser tab. Within a few seconds, the Admaxxer dashboard realtime view should show the event. If nothing lands after 2 minutes, re-check the snippet is actually in the rendered HTML <head> (View Source, not just DevTools).

Verify installation

Troubleshooting

Events fire twice in dev but once in prod.
That is React Strict Mode double-invoking effects in development only. initAdmaxxer is idempotent — subsequent calls are ignored. No action needed.
No events are showing up. What now?
Open DevTools Console and Network. Filter for script.js and /api/event. If they are blocked:csp, your Content Security Policy is blocking admaxxer.com — see /documentation/troubleshoot/csp. Also double-check that data-website-id matches the ID shown in your dashboard.
Events show up in staging but not production.
Confirm data-domain matches the production hostname exactly (no protocol, no trailing slash). Also confirm the website's Allowed Domains list in settings includes the prod domain.
My site is a single-page app — am I missing pageviews?
Use script.hash.js if you rely on location.hash routing. Otherwise the default script.js already hooks history.pushState/replaceState and tracks SPA navigations.

Related install guides

React (Vite / CRA) · Nuxt · Gatsby · All platforms