Product Analytics for Next.js: What to Track and How to Actually Use the Data

#nextjs #analytics #saas #webdev

Most developers launch products without an analytics setup. Then they wonder why some pages convert and others don't. Here's how to add meaningful analytics to a Next.js app -- tracking what actually matters, not just page views.

What to Track

Don't track everything. Tracking noise obscures signal. Track these four things:

Funnel events: Landing page view -> Pricing view -> Checkout start -> Purchase complete
Feature usage: Which parts of your app users actually use
Error events: Where users hit errors or dead ends
Revenue events: Tied directly to Stripe webhooks

Option 1: PostHog (Recommended for Most Projects)

PostHog is open-source, self-hostable, and has a generous free tier. It covers analytics, session recordings, feature flags, and A/B testing.

npm install posthog-js posthog-node

// src/lib/analytics.ts
import { PostHog } from "posthog-node"

// Server-side client (for API routes and Server Components)
export const posthog = new PostHog(
  process.env.NEXT_PUBLIC_POSTHOG_KEY!,
  { host: process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com" }
)

// Flush events before the function exits (important for serverless)
export async function flushAnalytics() {
  await posthog.flush()
}

// src/components/providers/posthog-provider.tsx
"use client"

import posthog from "posthog-js"
import { PostHogProvider } from "posthog-js/react"
import { useEffect } from "react"

export function PHProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com",
      capture_pageview: false,  // Capture manually for App Router
      capture_pageleave: true,
    })
  }, [])

  return <PostHogProvider client={posthog}>{children}</PostHogProvider>
}

Tracking Page Views in App Router

Next.js App Router doesn't trigger full page reloads on navigation. You need to capture views manually:

// src/components/providers/pageview-tracker.tsx
"use client"

import { usePathname, useSearchParams } from "next/navigation"
import { useEffect } from "react"
import { usePostHog } from "posthog-js/react"

export function PageviewTracker() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const posthog = usePostHog()

  useEffect(() => {
    if (pathname && posthog) {
      let url = window.origin + pathname
      if (searchParams.toString()) {
        url = url + "?" + searchParams.toString()
      }
      posthog.capture("$pageview", { "$current_url": url })
    }
  }, [pathname, searchParams, posthog])

  return null
}

Identifying Users

Link analytics events to your actual users:

// src/app/layout.tsx or a client component
"use client"

import { useEffect } from "react"
import { useSession } from "next-auth/react"
import { usePostHog } from "posthog-js/react"

export function UserIdentifier() {
  const { data: session } = useSession()
  const posthog = usePostHog()

  useEffect(() => {
    if (session?.user?.id && posthog) {
      posthog.identify(session.user.id, {
        email: session.user.email,
        name: session.user.name,
        plan: session.user.plan,  // custom property from your DB
      })
    } else if (!session && posthog) {
      posthog.reset()
    }
  }, [session, posthog])

  return null
}

Tracking Business Events

// src/lib/track.ts -- typed event tracking
import { usePostHog } from "posthog-js/react"

type TrackingEvent =
  | { event: "cta_clicked"; properties: { cta_name: string; page: string } }
  | { event: "pricing_viewed"; properties: { plan?: string } }
  | { event: "checkout_started"; properties: { plan: string; price: number } }
  | { event: "feature_used"; properties: { feature: string } }
  | { event: "error_encountered"; properties: { error_type: string; page: string } }

export function useTrack() {
  const posthog = usePostHog()

  return function track({ event, properties }: TrackingEvent) {
    posthog?.capture(event, properties)
  }
}

// Usage in a component
export function PricingCTA({ plan }: { plan: string }) {
  const track = useTrack()

  return (
    <button
      onClick={() => {
        track({ event: "checkout_started", properties: { plan, price: 99 } })
        window.location.href = stripeCheckoutUrl
      }}
    >
      Buy Now
    </button>
  )
}

Server-Side Event Tracking

For events that happen in API routes (purchases, subscription changes):

// src/app/api/webhooks/stripe/route.ts
import { posthog, flushAnalytics } from "@/lib/analytics"

async function handlePaymentSucceeded(session: Stripe.Checkout.Session) {
  const userId = session.metadata?.userId

  if (userId) {
    posthog.capture({
      distinctId: userId,
      event: "purchase_completed",
      properties: {
        plan: session.metadata?.plan,
        amount: session.amount_total,
        currency: session.currency,
      }
    })
    await flushAnalytics()  // Important in serverless -- flush before function exits
  }
}