Next.js (App Router)

Load the agent only in the browser. Never import it from Server Components.

Root layout

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script id="sr-token" strategy="beforeInteractive">
          {`window.__SHIELDREPLAY_TOKEN__ = '${process.env.NEXT_PUBLIC_SHIELDREPLAY_TOKEN}';`}
        </Script>
        <Script src={process.env.NEXT_PUBLIC_SHIELDREPLAY_AGENT} strategy="afterInteractive" />
      </body>
    </html>
  );
}

Environment variables

NEXT_PUBLIC_SHIELDREPLAY_TOKEN=your-site-token
NEXT_PUBLIC_SHIELDREPLAY_AGENT=https://your-host/agent/shieldreplay.min.js

SSR-safe usage

Use afterInteractive for the agent script. The token script can run beforeInteractive so it is available when the agent loads.

Preview & production origins

Add each deployment origin to allowed domains — e.g. https://myapp.vercel.app and https://myapp.com are separate origins.

Middleware routes

Exclude /_next static assets from any reverse-proxy rate limits on your ShieldReplay host.

Verify

Deploy preview → open site → confirm first session in Dashboard (sign in required).