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

# Next.js — Pages Router

> Install Tracelit in a Next.js Pages Router project via _app.tsx. SSR-safe with automatic SPA route tracking.

<img src="https://mintcdn.com/tracelit/yOAHPOHDFCUOtcaa/images/nextjs.svg?fit=max&auto=format&n=yOAHPOHDFCUOtcaa&q=85&s=dbfc38b06e972f7ce85cc7cb3c8fbc74" alt="Next.js" style={{ width: '40px', marginBottom: '4px' }} width="512" height="512" data-path="images/nextjs.svg" />

```bash theme={null}
npm install @tracelit/tracker
```

Add `init()` inside `useEffect` in `_app.tsx` so it only runs in the browser:

```tsx theme={null}
// pages/_app.tsx
import { useEffect } from 'react'
import { init } from '@tracelit/tracker'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    init({ token: 'YOUR_TOKEN_HERE', environment: 'production' })
  }, [])
  return <Component {...pageProps} />
}
```

<Warning>
  Always set `environment`. Only `"production"` and `"development"` are accepted. If omitted, events default to `development`.
</Warning>

Tracelit automatically tracks client-side navigation between pages via `history.pushState` — no extra setup needed.

***

## Adding user identity

```tsx theme={null}
// pages/_app.tsx
import { useEffect } from 'react'
import { init, identify, reset } from '@tracelit/tracker'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  const { user } = pageProps  // or from your auth hook

  useEffect(() => {
    init({ token: 'YOUR_TOKEN_HERE', environment: 'production' })
  }, [])

  useEffect(() => {
    if (user) identify(user.id, { email: user.email, plan: user.plan })
    else reset()
  }, [user])

  return <Component {...pageProps} />
}
```

***

## LLM Prompt

Paste this into your coding assistant to install Tracelit for you:

```text theme={null}
Install Tracelit in my Next.js Pages Router project.
Initialize @tracelit/tracker in pages/_app.tsx with:
init({ token: 'YOUR_TOKEN_HERE', environment: 'production' })
Only make minimal edits, show changed files, then add a short verification checklist.
```

***

## What's next?

| Topic                                   | Description                                   | Guide                             |
| --------------------------------------- | --------------------------------------------- | --------------------------------- |
| <Icon icon="user" /> **Identify users** | Full guide to linking sessions to real users. | [Read](/tracking/identify-users)  |
| <Icon icon="tag" /> **Feature tagging** | Tag flows in session replays.                 | [Read](/features/feature-tagging) |