Next.js — App Router

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

// 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

// app/layout.tsx
import { Tracelit } from '@/components/Tracelit'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Tracelit />
      </body>
    </html>
  )
}

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:

// components/TracelitIdentity.tsx
'use client'
import { useEffect } from 'react'
import { identify, reset } from '@tracelit/tracker'

export function TracelitIdentity({
  userId,
  traits,
}: {
  userId?: string
  traits?: Record<string, string>
}) {
  useEffect(() => {
    if (userId) identify(userId, traits)
    else reset()
  }, [userId])
  return 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 (
    <html>
      <body>
        {children}
        <Tracelit />
        <TracelitIdentity
          userId={session?.user?.id}
          traits={{ email: session?.user?.email, plan: session?.user?.plan }}
        />
      </body>
    </html>
  )
}

LLM Prompt

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

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
Feature tagging	Tag flows in session replays.	Read

Frontend

Backend

Next.js — App Router

Adding user identity (recommended)

LLM Prompt

What’s next?

​Adding user identity (recommended)

​LLM Prompt

​What’s next?

Adding user identity (recommended)

LLM Prompt

What’s next?