Install session replay in Next.js

In Next.js (App Router), add the loader as a plain inline<script> in your root layout — notnext/script. next/script injects after hydration, which starts the recording late and misses the beginning of every session — usually the most interesting part. The inline script runs during HTML parse, so the window.logcohort command queue exists before any of your code:

// app/layout.tsx — plain inline <script>, NOT next/script:
// it must run during HTML parse so recording starts before hydration.
const LOGCOHORT_LOADER = `
window.logcohort||(function(d){
  var o=window.logcohort=function(){o.api.push(arguments)};o.api=[];
  var c=d.createElement('script');c.async=true;
  c.src='https://app.logcohort.com/recorder.js';
  d.getElementsByTagName('head')[0].appendChild(c);
})(document);
logcohort('init','lc_YOUR_PROJECT_KEY');
`;

// …then render it as the first child of <body> in your root layout:
<script dangerouslySetInnerHTML={{ __html: LOGCOHORT_LOADER }} />

Your project key replaces lc_YOUR_PROJECT_KEY — the dashboard (Project → Install) generates this block with the key already filled in.

Verify

Run your app, click around for a few seconds, then open the logcohort dashboard — the session appears within seconds.

Why inline is safe here: the loader is a static string with no user input, and the queue buffers every call until the recorder loads — so later calls like identify can never race the script tag.

Next: identify signed-in users — including the server-session → client-effect pattern for Next.js.