> ## Documentation Index
> Fetch the complete documentation index at: https://docs.infinitewatch.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
> Add InfiniteWatch session replay to your Next.js application
## Overview
The `@infinitewatch/next` SDK provides a Next.js-compatible provider component that works with the App Router and Server Components.
## Step 1: Installation
```bash npm theme={null}
npm install @infinitewatch/next
```
```bash pnpm theme={null}
pnpm add @infinitewatch/next
```
```bash yarn theme={null}
yarn add @infinitewatch/next
```
## Step 2: Environment Variables
Add to your `.env.local` file:
```bash theme={null}
NEXT_PUBLIC_INFINITEWATCH_ORG_ID=YOUR_ORGANIZATION_ID
```
Replace `YOUR_ORGANIZATION_ID` with your actual organization ID. You can find this in your [InfiniteWatch dashboard](https://app.infinitewatch.ai/dashboard/settings).
## Step 3: Basic Setup
Create a providers file and wrap your app layout.
First, create `app/providers.tsx`:
```tsx theme={null}
'use client';
import { InfiniteWatchProvider } from '@infinitewatch/next';
export function Providers({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Then use it in `app/layout.tsx`:
```tsx theme={null}
import { Providers } from './providers';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
The `InfiniteWatchProvider` must be inside a `'use client'` component since it uses browser APIs. That's why we put it in a separate providers file.
## Identify Users
After the provider is set up, you can associate sessions with specific users:
```javascript theme={null}
InfiniteWatch.identify({
external_id: 'user-12345',
email: 'user@example.com',
full_name: 'John Doe',
metadata: {
plan: 'premium',
signup_date: '2024-01-15'
}
});
```
Call `identify()` after the user logs in. The `external_id` is persisted in a cookie so it carries across page reloads and sessions.