Next.js Surveys installation

Install the package

Required

Install the PostHog JavaScript library using your package manager:

npm install posthog-js
yarn add posthog-js
pnpm add posthog-js

Add environment variables

Required

Add your PostHog project token and host to your .env.local file and to your hosting provider (e.g. Vercel, Netlify). These values need to start with NEXT_PUBLIC_ to be accessible on the client-side.

.env.local
NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN=<ph_project_token>
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

Initialize PostHog

Required

Choose the integration method based on your Next.js version and router type.

If you're using Next.js 15.3+, you can use instrumentation-client.ts for a lightweight, fast integration:

instrumentation-client.ts
import posthog from 'posthog-js'

posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN!, {
    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
    defaults: '2026-01-30'
})

For the App router, create a providers.tsx file in your app folder. The posthog-js library needs to be initialized on the client-side using the 'use client' directive:

app/providers.tsx
'use client'

import { usePathname, useSearchParams } from "next/navigation"
import { useEffect } from "react"

import posthog from 'posthog-js'
import { PostHogProvider as PHProvider } from 'posthog-js/react'

export function PostHogProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN as string, {
      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
      defaults: '2026-01-30'
    })
  }, [])

  return (
    <PHProvider client={posthog}>
      {children}
    </PHProvider>
  )
}

Then import the PostHogProvider component in your app/layout.tsx and wrap your app with it:

app/layout.tsx
import './globals.css'
import { PostHogProvider } from './providers'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <PostHogProvider>
          {children}
        </PostHogProvider>
      </body>
    </html>
  )
}

For the Pages router, integrate PostHog at the root of your app in pages/_app.tsx:

pages/_app.tsx
import { useEffect } from 'react'
import { Router } from 'next/router'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {

  useEffect(() => {
    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN as string, {
      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
      defaults: '2026-01-30',
      loaded: (posthog) => {
        if (process.env.NODE_ENV === 'development') posthog.debug()
      }
    })
  }, [])

  return (
    <PostHogProvider client={posthog}>
      <Component {...pageProps} />
    </PostHogProvider>
  )
}

Defaults option

The defaults option automatically configures PostHog with recommended settings for new projects. See SDK defaults for details.

Accessing PostHog on the client

Recommended

Once initialized in instrumentation-client.ts, import posthog from posthog-js anywhere and call the methods you need:

app/checkout/page.tsx
'use client'

import posthog from 'posthog-js'

export default function CheckoutPage() {
    function handlePurchase() {
        posthog.capture('purchase_completed', { amount: 99 })
    }

    return <button onClick={handlePurchase}>Complete purchase</button>
}

Use the usePostHog hook to access PostHog in client components:

app/checkout/page.tsx
'use client'

import { usePostHog } from 'posthog-js/react'

export default function CheckoutPage() {
    const posthog = usePostHog()

    function handlePurchase() {
        posthog.capture('purchase_completed', { amount: 99 })
    }

    return <button onClick={handlePurchase}>Complete purchase</button>
}

Server-side setup

Optional

To capture events from API routes or server actions, install posthog-node:

npm install posthog-node
yarn add posthog-node
pnpm add posthog-node

Then, initialize PostHog in your API route or server action. Choose the method based on your router type:

For the App router, you can use PostHog in API routes or server actions. Create a new PostHog client instance for each request, or reuse a singleton instance across requests:

app/api/example/route.ts
import { PostHog } from 'posthog-node'

export async function POST(request: Request) {
    const posthog = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN!, {
        host: process.env.NEXT_PUBLIC_POSTHOG_HOST
    })

    posthog.capture({
        distinctId: 'distinct_id_of_the_user',
        event: 'event_name'
    })

    await posthog.shutdown()
}

You can also use PostHog in server actions:

app/actions.ts
'use server'

import { PostHog } from 'posthog-node'

export async function myServerAction() {
    const posthog = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN!, {
        host: process.env.NEXT_PUBLIC_POSTHOG_HOST
    })

    posthog.capture({
        distinctId: 'distinct_id_of_the_user',
        event: 'server_action_completed'
    })

    await posthog.shutdown()
}

For the Pages router, use PostHog in your API routes:

pages/api/example.ts
import { PostHog } from 'posthog-node'
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    const posthog = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN!, {
        host: process.env.NEXT_PUBLIC_POSTHOG_HOST
    })

    posthog.capture({
        distinctId: 'distinct_id_of_the_user',
        event: 'event_name'
    })

    await posthog.shutdown()

    res.status(200).json({ success: true })
}

Important

Always call await posthog.shutdown() when you're done with the client to ensure all events are flushed before the request completes. For better performance, consider creating a singleton PostHog instance that you reuse across requests.

6
Send events
Recommended
Click around and view a couple pages to generate some events. PostHog automatically captures pageviews, clicks, and other interactions for you.
If you'd like, you can also manually capture custom events:
JavaScript
posthog.capture('my_custom_event', { property: 'value' })

Next steps

Recommended

After installing the PostHog SDK, you can create your first survey.

Resource	Description
Creating surveys	Learn how to build and customize your surveys
Targeting surveys	Show surveys to specific users based on properties, events, or feature flags
How to create custom surveys	Build advanced survey experiences with custom code
Framework guides	Setup guides for React, Next.js, Vue, and other frameworks
More tutorials	Other real-world examples and use cases

You should also identify users and capture events with PostHog to control who and when to show surveys to your users.

Not all survey features are available on every SDK. See the SDK feature support matrix for a full comparison.

Next.js Surveys installation

Install the package

Add environment variables

Initialize PostHog

Accessing PostHog on the client

Server-side setup

Send events

Next steps

Community questions

Was this page useful?