Next.js — Pages Router - Tracelit

Next.js

npm install @tracelit/tracker

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

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

Always set environment. Only "production" and "development" are accepted. If omitted, events default to development.

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

Adding user identity

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

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
Identify users	Full guide to linking sessions to real users.	Read
Feature tagging	Tag flows in session replays.	Read