> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trysignal.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Use Signal JS with Next.js App Router and Pages Router

# Next.js Integration

Use Signal JS with Next.js using the **@signal-js/nextjs** package. It provides client components (SignalNextProvider, hooks) and server utilities (createSignalServer). You add a **getSessionInfo()** helper in `lib/signal-server.ts` (see [Initialization](/docs/integrations/nextjs/initialization)) to read tracing headers for session correlation.

## Quick start

1. **Install** — `npm install @signal-js/nextjs`
2. **Client** — Wrap your app with `SignalNextProvider` in a client providers file and add it to your root layout. See [Initialization](/docs/integrations/nextjs/initialization).
3. **Server** — Create a shared `signal` client with `createSignalServer` and a `getSessionInfo()` helper in `lib/signal-server.ts`. See [Initialization](/docs/integrations/nextjs/initialization).
4. **Track events** — Use hooks on the client and `signal.capture()` on the server with session identifiers. See [Capture](/docs/integrations/nextjs/capture) and [Server tracking](/docs/integrations/nextjs/server-tracking).

## Sub-pages

| Page | Description |
| - | - |
| [Initialization](/docs/integrations/nextjs/initialization) | Install, client provider, server setup, environment variables |
| [Capture](/docs/integrations/nextjs/capture) | Track events from client (hooks) and server (API routes, Server Actions) |
| [Identify](/docs/integrations/nextjs/identify) | Identify users on client and server |
| [Set person properties](/docs/integrations/nextjs/set-person-properties) | Update user properties with setPersonProperties, setPersonPropertiesOnce (client and server) |
| [Group](/docs/integrations/nextjs/group) | Associate users with groups (client and server) |
| [Super properties](/docs/integrations/nextjs/super-properties) | Register properties included with every event (client only) |
| [Alias](/docs/integrations/nextjs/alias) | Link aliases to users (client and server) |
| [Recording control](/docs/integrations/nextjs/recording-control) | Control recording with startRecording, stopRecording, pauseRecording, resumeRecording, flush (client only) |
| [Opt-out](/docs/integrations/nextjs/opt-out) | Control user opt-out with optOut, optIn, hasOptedOut (client only) |
| [Flush and shutdown](/docs/integrations/nextjs/flush-shutdown) | Flush queued events and graceful shutdown (server only) |
| [Server tracking](/docs/integrations/nextjs/server-tracking) | API routes, Server Actions, Pages Router, getServerSideProps |
| [Page views](/docs/integrations/nextjs/page-views) | Automatic and manual page view tracking |
| [Configuration](/docs/integrations/nextjs/configuration) | SignalNextProvider and createSignalServer options |

## Features

* **App Router support** — Full support for Next.js 13+ App Router
* **Pages Router support** — Compatible with Pages Router
* **Server-side tracking** — Track events from API routes and server actions
* **Session correlation** — Link client and server events using tracing headers
* **Page view tracking** — Automatic page view tracking on route changes

## Best practices

1. Use environment variables — Store credentials in `.env.local`.
2. Use addTracingHeaders only when needed — Set in `options` only if you track server-side events and want correlation.
3. Track server events — Pass `sessionId` and `windowId` from request headers to `signal.capture()` so events link to the same session replay.
4. Separate client/server configs — Use `NEXT_PUBLIC_` prefix for client-side variables.
5. Use sessionRecordingMasking — Add `signal-no-capture`, `signal-mask`, or `signal-ignore-input` classes to sensitive UI.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.