Next.js

@interfere/next connects browser errors, session replay, and server requests to the same surface. The build plugin uploads source maps so investigations can show your original code. You need a Next.js 16 or later App Router app, React 19, and Node.js 20 or later. Create a surface before starting; its keys connect this app to your workspace.

Setup

Install the package

npm install @interfere/next

pnpm add @interfere/next

yarn add @interfere/next

bun add @interfere/next

Set your keys

Copy the keys from your surface into your deployment’s environment variables. Set both for builds; the runtime needs the public key.

INTERFERE_PUBLIC_KEY=YOUR_SURFACE_PUBLIC_KEY
INTERFERE_API_KEY=YOUR_SURFACE_SECRET_KEY
INTERFERE_ENVIRONMENT=staging

Use production for your production deployment. Keep the secret key out of browser code. These variables do not need a NEXT_PUBLIC_ prefix.

Connect your build

Wrap your existing Next.js config. The plugin registers releases and uploads source maps during production builds.

next.config.ts

import { withInterfere } from "@interfere/next/config";
import type { NextConfig } from "next";

const config: NextConfig = {};

export default withInterfere(config);

Keep withInterfere() outermost when composing config wrappers. See Releases and source maps if another tool also uploads source maps.

Start server and browser capture

Create instrumentation.ts in the project root, or inside src if your app uses a src directory.

instrumentation.ts

export { onRequestError, register } from "@interfere/next/instrumentation";

If you already initialize OpenTelemetry, follow OpenTelemetry composition instead of registering a second provider.Create instrumentation-client.ts beside instrumentation.ts. Next.js loads it before the app becomes interactive.

instrumentation-client.ts

import { init } from "@interfere/next/instrument-client";

init();

Wrap your root layout

Wrap the root layout. The provider exposes identity and consent hooks and reports React render errors. Browser capture still requires the init() call above.

app/layout.tsx

import { InterfereProvider } from "@interfere/next/provider";
import type { ReactNode } from "react";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <InterfereProvider>{children}</InterfereProvider>
      </body>
    </html>
  );
}

Before recording customer sessions, set consent at initialization and review replay masking.

Verify capture

After initialization, report a test error from an existing button or event handler in your staging app:

import { capture } from "@interfere/next/instrument-client";

capture(new Error("Interfere setup test"));

Open your surface’s event chart to confirm that traffic arrives, then remove the test call.

Next steps

User tracking, report handled errors and trace custom work, or configure server telemetry and OpenTelemetry.

Getting started

Product

Settings

Compliance

SDKs

Developer tools

Setup

Verify capture

Next steps

​Setup

​Verify capture

​Next steps

Setup

Verify capture

Next steps