> ## 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 — App Router
> Install Tracelit in a Next.js App Router project using a Client Component. SSR-safe, no window guard needed.
```bash theme={null}
npm install @tracelit/tracker
```
Because `init()` needs to run in the browser (not on the server), wrap it in a Client Component.
***
**1. Create the component**
```tsx theme={null}
// components/Tracelit.tsx
'use client'
import { useEffect } from 'react'
import { init } from '@tracelit/tracker'
export function Tracelit() {
useEffect(() => {
init({ token: 'YOUR_TOKEN_HERE', environment: 'production' })
}, [])
return null
}
```
Always set `environment`. Only `"production"` and `"development"` are accepted. If omitted, events default to `development`.
**2. Add it to your root layout**
```tsx theme={null}
// app/layout.tsx
import { Tracelit } from '@/components/Tracelit'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
`init()` is a no-op on the server — it checks for `window` internally. You don't need a `typeof window !== 'undefined'` guard.
***
## Adding user identity (recommended)
Create a second Client Component to call `identify()` once your session is available:
```tsx theme={null}
// components/TracelitIdentity.tsx
'use client'
import { useEffect } from 'react'
import { identify, reset } from '@tracelit/tracker'
export function TracelitIdentity({
userId,
traits,
}: {
userId?: string
traits?: Record
}) {
useEffect(() => {
if (userId) identify(userId, traits)
else reset()
}, [userId])
return null
}
```
```tsx theme={null}
// app/layout.tsx
import { Tracelit } from '@/components/Tracelit'
import { TracelitIdentity } from '@/components/TracelitIdentity'
import { getServerSession } from 'next-auth'
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const session = await getServerSession()
return (
{children}
)
}
```
***
## LLM Prompt
Paste this into your coding assistant to install Tracelit for you:
```text theme={null}
Install Tracelit in my Next.js App Router project.
Create a client component that runs:
init({ token: 'YOUR_TOKEN_HERE', environment: 'production' })
Mount it in app/layout.tsx.
Keep edits minimal, list changed files, then give a 30-second verify checklist.
```
***
## What's next?
| Topic | Description | Guide |
| --------------------------------------- | --------------------------------------------- | --------------------------------- |
| **Identify users** | Full guide to linking sessions to real users. | [Read](/tracking/identify-users) |
| **Feature tagging** | Tag flows in session replays. | [Read](/features/feature-tagging) |