Integrate Rehearsals with Custom React or Next.js (Self-Hosted)
This guide shows you how to install the Rehearsals tracking snippet once, site-wide, on any React or Next.js application (self-hosted or hosted on platforms like Vercel, Netlify, etc.) so you can start capturing session replays and receiving AI-generated insights.
Before You Begin
- Make sure you can edit your root template file:
- React - public/index.html (Create React App, Vite, etc.).
- Next.js (Pages Router) - pages/_app.(js|tsx) (or _document.(js|tsx) if you prefer to keep scripts in <Head>).
- Next.js (App Router, v13+) - app/layout.(js|tsx).
- Create your Rehearsals account and copy your unique tracking snippet (it already contains your API Key and Organization ID).
Step 1 - Copy Your Tracking Snippet
Replace the placeholders with your real keys:
<script>
window.deepPredictionSettings = {
apiKey: 'dp_proj_xxxxx',
organizationId: 'dp_org_xxxxx'
};
</script>
<script async defer src="https://app.runrehearsals.com/recorder.js"></script>
Step 2 - Add the Snippet Site-Wide
A. Plain React (Create React App, Vite, etc.)
- Open public/index.html.
- Paste the entire snippet just before the closing </head> tag.
- Prefer the header so it loads as early as possible.
- If you want to lazy-load, you can instead paste it right above </body> - either location loads on every page.
- Save and redeploy.
B. Next.js - Pages Router
- Open pages/_app.tsx (or .js).
- Import the Next.js <Script> component and drop the snippet once at the bottom of the return tree:
import Script from 'next/script';
import type { AppProps } from 'next/app';
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
{/* Rehearsals Tracking Code */}
<Script id="rehearsals-config" strategy="beforeInteractive">
{`
window.deepPredictionSettings = {
apiKey: 'dp_proj_xxxxx',
organizationId: 'dp_org_xxxxx'
};
`}
</Script>
<Script
src="https://app.runrehearsals.com/recorder.js"
strategy="afterInteractive"
async
defer
/>
{/* End Rehearsals Tracking Code */}
</>
);
}
_app.tsx renders on every route, so you never need to touch individual pages.
C. Next.js - App Router (v13+)
- Open your root layout (app/layout.tsx).
- Add the same pair of <Script> tags just before the closing </body>. The App Router’s root layout wraps your entire site, ensuring global coverage.
Tip: You can switch the second <Script> to strategy="lazyOnload" if you'd rather load the recorder during browser idle time - handy for performance-sensitive apps.
Step 3 - Verify Installation
- Open your site in an incognito/private window and click around for ~15 seconds.
- Log in to app.runrehearsals.com - the dashboard will confirm if sessions are being saved.
- You should see new replays appear in your Rehearsals dashboard almost instantly.
Compliance Note
It’s your responsibility to give visitors a way to opt-out of analytics tracking if required by your local laws (e.g., via a cookie banner).
What Happens Next
Now that Rehearsals is installed, you'll get access to powerful AI-driven features:
- Radar - Get instantly notified when users do positive or negative behaviors that impact revenue
- Rehearsals Brief - Receive McKinsey-level reports from 1,000+ data scientists analyzing your user sessions
- Customer Simulations - Rehearse revenue outcomes from pricing, product, and marketing changes in simulated environments
- Customer Data Extraction - Turn unstructured behavioral data into structured insights (names, interests, contact info)
- Visual Product Graph - Automatically map every button and screen to see exactly how customers navigate your app
Congrats! Rehearsals is watching every customer and will soon tell you why they turn, why they pay, and what you should build next.
This is the era of vibe analytics.