Skip to main content

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 
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' })
  }, [])
  return null
}
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.
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>
  )
}

​
Install with AI (Bolt, Lovable, Replit)

Bolt logo

Lovable logo

Replit logo
Install Tracelit in my Next.js App Router project.
Create a client component that runs:
init({ token: 'YOUR_TOKEN_HERE' })
Mount it in app/layout.tsx.
Keep edits minimal, list changed files, then give a 30-second verify checklist.

​
What’s next?

Identify users

Full guide to linking sessions to real users.

Feature tagging

Tag routes and flows in session replays.