Skip to main content

​
Overview

The @infinitewatch/next SDK provides a Next.js-compatible provider component that works with the App Router and Server Components.

​
Step 1: Installation

npm install @infinitewatch/next

​
Step 2: Environment Variables

Add to your .env.local file: 
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.

​
Step 3: Basic Setup

Create a providers file and wrap your app layout. First, create app/providers.tsx: 
'use client';

import { InfiniteWatchProvider } from '@infinitewatch/next';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <InfiniteWatchProvider
      organizationId={process.env.NEXT_PUBLIC_INFINITEWATCH_ORG_ID!}
    >
      {children}
    </InfiniteWatchProvider>
  );
}
Then use it in app/layout.tsx: 
import { Providers } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
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: 
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.