---
title: Using PostHog with the Next.js App Router and Vercel
description: Learn how to use PostHog with Next.js and Vercel to add analytics, feature flags, and more.
url: /kb/guide/posthog-nextjs-vercel-feature-flags-analytics
canonical_url: "https://vercel.com/kb/guide/posthog-nextjs-vercel-feature-flags-analytics"
published: 2025-11-03
last_updated: 2026-06-15
authors: Lee Robinson
related:
  - /docs
  - /docs/concepts/deployments/git
  - /docs/concepts/projects/environment-variables
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---
<!-- docsgraph:related -->
## Related pages

> **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below.

- [Sitecore](https://vercel.com/docs/integrations/cms/sitecore?from=related) — Integrate Vercel with Sitecore XM Cloud to deploy your content.
- [Getting Started](https://vercel.com/docs/analytics/quickstart?from=related) — Vercel Web Analytics provides you detailed insights into your website's visitors. This quickstart guide will help you ge
- [Getting Started](https://vercel.com/docs/flags/vercel-flags/quickstart?from=related) — Create your first feature flag and evaluate it in your application using the Flags SDK, OpenFeature, or the core library
- [How to Integrate Optimizely Feature Experimentation with Next.js and Vercel](https://vercel.com/kb/guide/how-to-integrate-optimizely-feature-experimentation-next-vercel?from=related) — This guide covers setting up feature flags, implementing A/B tests, and optimizing performance using React Server Compon
- [Migrate a Next.js app from Webflow Cloud to Vercel](https://vercel.com/kb/guide/migrate-a-next-js-app-from-webflow-cloud-to-vercel?from=related) — Move your Next.js app from Webflow Cloud to Vercel: remove the OpenNext Cloudflare adapter, drop the base path, map stor
- [Deploy a headless BigCommerce storefront with Vercel](https://vercel.com/kb/guide/deploy-headless-bigcommerce-storefront-with-vercel?from=related) — Deploy a headless BigCommerce storefront using Catalyst and Next.js on Vercel
- [How to ship an H3 app on Vercel](https://vercel.com/kb/guide/ship-a-h3-app-on-vercel?from=related) — Deploy an H3 app to Vercel with zero configuration. Learn to configure streaming, middleware, cron jobs, the Bun runtime
- [How to Deploy a Hugo Site with Vercel](https://vercel.com/kb/guide/deploying-hugo-with-vercel?from=related) — Create a Hugo website and deploy it live with Vercel.

Full cross-link map for this page: [/kb/guide/posthog-nextjs-vercel-feature-flags-analytics.graph.md](/kb/guide/posthog-nextjs-vercel-feature-flags-analytics.graph.md)
<!-- /docsgraph:related -->


PostHog is an open-source, developer-friendly product analytics platform. Combined with Next.js and Vercel, developers can easily track events, set up feature flags, and gain insights into their customer traffic.

## Why choose Next.js, Vercel, and PostHog?

- [Next.js](https://nextjs.org): A powerful React framework for building dynamic, high-performance UIs. With the App Router, server-side experimentation and personalization are made easy with React Server Components.
  
- [Vercel](https://vercel.com/docs)**:** A frontend cloud providing the frameworks, workflows, and infrastructure to build a faster, more personalized web. Vercel created and maintains Next.js.
  
- [PostHog](https://posthog.com/docs/libraries/next-js): PostHog is an open-source, developer-friendly product analytics platform. It respects user privacy and gives you full control over your data.
  

This guide will show how to use these tools together on both the client and server.

## Setting Up PostHog with Next.js

### 1\. Create a Next.js Application

After ensuring [Node.js is installed](https://nodejs.org/en/download):

```bash
npx create-next-app@latest next-app
cd next-app
npm run dev
```

### 2\. Adding PostHog

Sign up for a [PostHog instance](https://app.posthog.com/signup) to obtain your project API key and instance address. Add your API key and address to a `**.env.local**`:

```bash
NEXT_PUBLIC_POSTHOG_KEY="your-api-key"
NEXT_PUBLIC_POSTHOG_HOST="your-ph-address"
```

Add `posthog-js` to your project and then configure PostHost by creating a new Client Component to instantiate the provider:

```jsx
'use client'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'

if (typeof window !== 'undefined') {
  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST
  })
}

export function PHProvider({ children }) {
  return <PostHogProvider client={posthog}>{children}</PostHogProvider>
}
```

Finally, consume the provider inside your root layout, which is a Server Component.

```jsx
import './globals.css'
import { PHProvider } from './providers'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <PHProvider>
        <body>{children}</body>
      </PHProvider>
    </html>
  )
}
```

### 3\. Using PostHog with React Server Components

The Next.js App Router uses React Server Components by default. This provides a number of benefits, including running code server-only that is not included in the client-side JavaScript bundle.

To use PostHost on the server, you can use the [PostHog Node SDK](https://posthog.com/docs/libraries/node) to access features like server-side rendered feature flags. First, install `posthog-node` and then use the following:

```jsx
import { PostHog } from 'posthog-node'

const posthog = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
  host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
})

export default function Page() {  
  posthog.capture({
    distinctId: 'lee@vercel.com',
    event: 'Page was loaded'
  })
  
  return '...'
}
```

### 4\. Setting Up Feature Flags

You can access feature flags in PostHog to conditionally render content from Next.js. First, create a flag inside PostHog with the key `my_flag`. This flag should be rolled out to 100% of your traffic.

Inside your Next.js application, you can read the flag as follows:

```jsx
import { PostHog } from 'posthog-node'

const posthog = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
  host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
})

export default async function Page() {
  const flags = await posthog.getAllFlags(
    'lee@vercel.com' // replace with a user's distinct ID
  );

  return (
    flags.my_flag ? <p>On</p> : <p>Off</p>
  )
}
```

## Deploying on Vercel

Now that your Next.js application is integrated with PostHog for capturing events and handling feature flags, you can deploy to Vercel's frontend cloud.

1. [Set up Vercel with your GitHub repository](https://vercel.com/docs/concepts/deployments/git)
   
2. Push changes to GitHub
   
3. [Clone and deploy your repository](https://vercel.com/new)
   
4. [Add the Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) you created earlier
   
5. Your site is now online!