PostHog in Your App

Setting Up PostHog#

Getting started is pretty painless.

Step 1. Create Account#

Sign up at posthog.com. The free tier is VERY generous.

Step 2. Install the Library#

Add PostHog to your app.

Step 3. Initialize#

Set PostHog up when your app loads.

Step 4. Track Events#

Add tracking code wherever the important stuff happens.

Here's a basic setup for a Next.js app. Install the library first.

npm install posthog-js

Then put your project token and host in .env.local. Use https://us.i.posthog.com if your PostHog project lives in the US cloud, or https://eu.i.posthog.com if it's in the EU cloud.

NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN=your_project_token
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

Last, create a file called instrumentation-client.js in the root of your Next.js app. Next.js runs it once in the browser when your app loads, which is exactly when PostHog wants to start up.

// instrumentation-client.js
 
import posthog from 'posthog-js'
 
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN, {
  api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
  defaults: '2026-05-30'
})

That defaults date pins PostHog's default settings to a specific version, so an update doesn't quietly change how your tracking behaves. Copy whatever date PostHog's own Next.js docs show when you set it up.

Session Recordings#

One of PostHog's coolest features is session recording. It records exactly what people do in your app... mouse movements, clicks, scrolling, all of it.

This stuff is crazy valuable for a few jobs.

• Finding the confusing parts of your interface
• Seeing how people actually get tasks done
• Spotting weird ways people use your app that you never planned for
• Debugging problems users report

Funnels#

A "funnel" follows people through a series of steps. Here's a checkout funnel, for example.

1. View product (1,000 users)
2. Add to cart (300 users)
3. Start checkout (150 users)
4. Complete purchase (100 users)

The funnel shows you where people drop off. In this example, MOST of them leave between viewing the product and adding it to the cart. So that's your sign to go fix the product page.

Feature Flags#

PostHog comes with feature flags, which are a way to show new features to only some of your users.

// Flags load in the background, so wait for them first
posthog.onFeatureFlags(() => {
  if (posthog.isFeatureEnabled('new_checkout')) {
    // Show new checkout
  } else {
    // Show old checkout
  }
})

That onFeatureFlags wrapper matters. Right when the page loads PostHog hasn't fetched your flags yet, so checking too early can show everybody the old version.

Here's what that lets you do.

• Test features with a small percentage of users first
• Roll out risky changes a lil at a time
• A/B test different versions
• Shut a feature off fast if something goes sideways