Nevision for Next.js
A single next/script tag in your root layout (works for App Router and Pages Router) is all you need. Captures session replay, errors, RUM, and Web Vitals automatically — no npm package, no bundler config.
Install
// Drop the next/script tag below into your root layout — that's the install. // See the usage snippet on the right for the full layout file.
Initialize
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script
src={`https://api.nevision.app/recorder.js?siteId=${process.env.NEXT_PUBLIC_NEVISION_SITE_ID}`}
strategy="afterInteractive"
/>
</body>
</html>
);
}Common pitfalls
Use afterInteractive strategy
next/script's beforeInteractive blocks page render — use afterInteractive so the recorder loads after your page is interactive (preserves LCP).
Public env vars only
Site ID and API key go in NEXT_PUBLIC_* vars since they're sent from the browser. The API key is publishable (write-only for events), not a secret.
App Router server components
Server components can't init the recorder (no window). Init in a client component or via Script tag in the root layout.
FAQ
Does it work with the Pages Router too?+
Yes — put the Script in pages/_app.tsx or pages/_document.tsx. App Router is recommended for new projects.
Will it slow down hydration?+
No. The recorder loads after hydration completes (afterInteractive strategy). Zero impact on FCP, LCP, or hydration time.
How do I capture server-side errors from API routes?+
Wrap your API route handlers and POST exceptions to /v1/logs with level=error. We have a middleware example in the docs.