Session Replay for Next.js

Session replay for Next.js applications. Works with App Router and Pages Router.

Quick Start

1. Install the package

npm install @puppethand/record

2. Initialize recording

app/providers.tsx

// app/providers.tsx
'use client';

import { useEffect } from 'react';
import { record } from '@puppethand/record';

export function Providers({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    record({
      apiKey: 'ph_pub_xxx',
    });
  }, []);

  return <>{children}</>;
}

3. View sessions in your dashboard

Sessions will appear in your PuppetHand dashboard within seconds of recording.

Next.js-Specific Features

App Router & Pages Router support
Server Component compatible
Automatic route change tracking
Edge Runtime compatible
Vercel deployment ready

Configuration Options

Configuration

record({
  apiKey: 'ph_pub_xxx',

  // Optional configuration
  maskAllInputs: true,          // Mask all input values
  maskAllText: false,           // Mask all text content
  blockClass: 'ph-block',       // Block elements with this class
  ignoreClass: 'ph-ignore',     // Ignore elements with this class

  // Sampling (reduce data volume)
  sampling: {
    mousemove: true,            // Record mouse movements
    scroll: 100,                // Throttle scroll events (ms)
    input: 'last',              // Record only last input value
  },

  // Network recording
  recordNetwork: true,          // Record fetch/XHR requests
  recordConsole: true,          // Record console logs
});

Full Documentation

For advanced configuration, troubleshooting, and best practices, check out our full Next.js documentation.

View Next.js Docs

Ready to add session replay to Next.js?

Start free with 10GB storage. Setup takes 30 seconds.

Start Free View Pricing