Next.js

Run init

The quickest way. It signs you in, creates the site, writes the environment variable and adds the component to your layout.

npx satsu-analytics init

Skip to Verify it works if init finished. To do it by hand, continue with the next steps.

Or install the package yourself

npm install satsu-analytics

Set the site ID

Create a site in the dashboard (Sites → your site → install) and put its ID into .env.local:

NEXT_PUBLIC_SATSU_SITE=YOUR_ID

The component reads NEXT_PUBLIC_SATSU_SITE when you don't pass site, so staging and production can use different sites without code changes.

Add the component

App Router, in app/layout.tsx:

import { Satsu } from "satsu-analytics/next";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Satsu />
      </body>
    </html>
  );
}

Pages Router, in pages/_app.tsx:

import type { AppProps } from "next/app";
import { Satsu } from "satsu-analytics/next";
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Satsu />
    </>
  );
}

Verify it works

Start your app with npm run dev. On localhost the tracker itself is not loaded; the component sends one dev ping per page load so the install check can confirm the setup, and it is never counted or shown in your stats. After you deploy, follow Verify it works to see the first real visit.