Flags SDK with Vercel

A Next.js App Router example that evaluates two feature flags server-side through the Vercel Flags SDK, controlling a welcome message and a banner's visibility. It is adapted from Vercel's own Flags SDK example and ships with one-click deploy support.

What is Flags SDK with Vercel?

Flags SDK with Vercel is a minimal Next.js App Router template that defines two server-evaluated feature flags: a string flag called welcome_message and a boolean flag called show_banner. On each page load it calls the Flags SDK's evaluate() API to resolve both values and renders the greeting and banner accordingly. Vercel maintains the underlying Flags SDK and hosts the flags configuration in the project's Flags tab.

Key Features

• Two server-evaluated flags — welcome_message (String, set to Hello from Vercel) and show_banner (Boolean, set to true) are resolved with the SDK's evaluate() API on the server.
• Next.js App Router stack — built on the Next.js App Router, installs published SDK packages, and uses the standard Next.js build command.
• OIDC-based authentication — VERCEL_OIDC_TOKEN is pulled by the Vercel CLI for local development and injected automatically on Vercel deployments, so no SDK key is required.
• Flags Explorer integration — flag definitions are exposed at /.well-known/vercel/flags, protected by FLAGS_SECRET, and reported to the Vercel Toolbar.
• Session overrides — the Vercel Toolbar's Flags Explorer lets you override welcome_message or show_banner locally without changing configured values.
• Graceful fallback — if flags can't be evaluated, the welcome message falls back to Welcome to the Vercel example and the banner stays hidden.
• One-click deploy — the Deploy button copies only this folder, using the auto-generated FLAGS_SECRET.
• Monorepo-aware setup — Turbo filters (--filter=flags-sdk-vercel) build the SDK and adapter before Next.js, with documented Vercel deploy settings for the workspace version.

Who is it for?

• Next.js developers adding feature flags: start from a working App Router page that already reads two flags server-side.
• Teams evaluating Vercel Flags: compare how OIDC tokens and FLAGS_SECRET replace SDK keys before committing to a provider.
• Teams wanting per-session testing: use Flags Explorer to flip show_banner for a session and see the effect on refresh without editing configured values.

How does flags SDK with Vercel work?

Create both flags in your Vercel project's Flags tab with the listed values, then run vercel link and vercel env pull .env.local to pull Development variables. Before starting Next.js, Turbo builds the local SDK and adapter via explicit task dependencies. Run pnpm dev and open http://localhost:3000; Node.js 22 or newer is recommended. For deployments outside Vercel, you can optionally set FLAGS to a Vercel Flags SDK key.

FAQ

What does Flags SDK with Vercel do?

It is a Next.js App Router example that evaluates two Vercel Flags SDK flags on the server — a string welcome_message and a boolean show_banner — and renders the resulting greeting and banner on the home page, falling back to default text and a hidden banner if evaluation fails.

Do I need an SDK key to run it?

No SDK key is required. On Vercel, authentication uses VERCEL_OIDC_TOKEN, which the CLI pulls for local development and Vercel provides on deployments. FLAGS_SECRET is separate and authenticates Flags Explorer and encrypts overrides.

How do I generate FLAGS_SECRET manually?

Create 32 random bytes with node -e "console.log(require('crypto').randomBytes(32).toString('base64url'))" and add the value to the matching Vercel environment and to .env.local. For Development, use a regular environment variable rather than a Secret.

Why do I need to re-pull environment variables?

Re-run vercel env pull .env.local if your local OIDC token expires, otherwise flag evaluation will fail locally and the page will show its fallback greeting with the banner hidden.