Install

Next.js

App Router or Pages Router.

Use next/script in your root layout so the tag loads after the page is interactive.

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://replaycat.com/rc.js?site=YOUR_SITE_KEY" strategy="afterInteractive" />
      </body>
    </html>
  );
}

For the Pages Router put the same <Script> in pages/_app.tsx. Client-side navigations are tracked automatically; you do not need to call anything on route change.

To identify logged-in users, call window.rc("identify", user.id, { email: user.email }) from a useEffect once the user is known. The function is safe to call before the script has loaded only if you guard it: window.rc?.(...).