Flags SDK with PostHog

Flags SDK with PostHog is a Next.js App Router example template that wires Vercel's Flags SDK to a PostHog project so two feature flags are evaluated on the server and rendered on the home page. It is adapted from the Vercel PostHog example and ships with a prefilled Deploy with Vercel button that copies only this folder.

What is Flags SDK with PostHog?

Flags SDK with PostHog is a minimal Next.js App Router application demonstrating server-side feature flag evaluation through the @flags-sdk/posthog adapter. It takes a PostHog project API key, regional host, and two flag definitions as input, and outputs a home page showing a greeting string and a conditional banner. The two flags are read with the Flags SDK evaluate() API, and every visitor shares the fixed demo-user identity, so the same value is served to all. The template is published in the Vercel Flags SDK repository's providers examples folder.

Key Features

• Next.js App Router stack — a single home page built on Next.js with published SDK packages and the standard Next.js build command.
• Two server-evaluated flags — welcome_message is read as a JSON string payload via postHogAdapter.payload; show_banner is read as a boolean via postHogAdapter.
• Flags Explorer endpoint — a discovery route at /.well-known/vercel/flags loads flag metadata (descriptions, options, dashboard links) from your PostHog project, protected by FLAGS_SECRET.
• Vercel Toolbar integration — during local development you can override either flag for your session without changing values in PostHog.
• Optional local evaluation — setting a POSTHOG_SECRET_KEY feature flags secret key enables local evaluation; the adapter otherwise evaluates flags remotely.
• Vercel deploy button — one-click clone with the five required environment variables pre-declared.
• Workspace and standalone modes — runs from a standalone copy or inside the Flags SDK monorepo through Turbo filters.

Who is it for?

• Next.js developers adopting PostHog flags: a working reference for evaluating feature flags on the server instead of the client.
• Teams setting up Flags Explorer: a template showing which PostHog credentials the metadata endpoint needs.
• Developers prototyping flag overrides: a base for testing flag changes per session with the Vercel Toolbar.

What can you do with Flags SDK with PostHog?

• Test a personalized greeting: change the welcome_message payload in PostHog and refresh the page to see the new string rendered server-side.
• Toggle page elements: flip the boolean show_banner flag in PostHog to show or hide a banner on the home page.
• Override flags locally: link the folder with vercel link and use Flags Explorer in the toolbar to change flag values for your session only.

How does Flags SDK with PostHog work?

Create the two flags in PostHog (enabled for 100% of users, with the JSON string payload on welcome_message), copy .env.example to .env.local, and fill in the PostHog API key, host, project secret API key, project ID, and a generated FLAGS_SECRET. Then run pnpm install and pnpm dev and open localhost:3000. Flag value changes in PostHog appear after a page refresh.

FAQ

What credentials does this template need?

It requires POSTHOG_PROJECT_API_KEY (a phc_... key), POSTHOG_HOST (US or EU regional host), a phs_... project secret API key scoped to feature_flag:read, the numeric POSTHOG_PROJECT_ID, and a generated FLAGS_SECRET. The secret key and project ID are used only for Flags Explorer metadata.

Does it support local flag evaluation?

Yes, if you set POSTHOG_SECRET_KEY to a phs_... feature flags secret key. Without it, the adapter evaluates flags remotely against PostHog by default.

Which Node.js version is required?

Running the example as a standalone project requires Node.js 22.22 or newer. Production builds use pnpm build followed by pnpm start.