One SDK for Server Components, Client Components, and Middleware.
Evaluate a flag before the page ever renders, on the server or at the edge, with the same evaluate() call everywhere in your App Router project.
JavaScript
Node.js
React
Next.js
Python
RubyMCP SupportWhat are feature flags?
A feature flag is a runtime switch in your code that decides whether a piece of functionality is visible or active, without requiring a new deployment.
Instead of shipping a feature straight to every user the moment it merges, you wrap it in a flag. The code reaches production immediately, but stays off until you decide to turn it on — for one user, a percentage of traffic, or everyone at once.
Six problems a feature flag solves
Deploy continuously
Merge and ship to production every day, and keep unfinished work safely behind a flag instead of a long-lived branch.
Release gradually
Turn a feature on for 5% of traffic first, watch for errors, then widen the rollout instead of flipping a switch for everyone at once.
Beta test with real users
Target specific accounts or user IDs so a handful of people can try a feature before it reaches everyone else.
Disable instantly
If a feature misbehaves in production, turn it off from the dashboard in seconds — no rollback, no redeploy.
Reduce deployment risk
Separate "deployed" from "released." Code can sit in production, inactive, until you decide it is ready.
Ship faster as a team
Multiple engineers can merge into main continuously without waiting on each other's features to be release-ready.
One flag, four states
The same flag key, evaluated with a different user context, can return a different result for every visitor — without a second deployment.
Get the SDK
npm install @flagpilot/next
From install to your first evaluation
Install the SDK
Add the Next.js SDK, which re-exports both the server client and the React hooks.
npm install @flagpilot/next
Initialize the client
Create a client using your secret key, typically in a shared server-only module.
const client = new FlagPilot({
apiKey: process.env.FLAGPILOT_SECRET_KEY,
environment: 'production'
});Evaluate in a Server Component
Call evaluate() before the page renders — no client-side flash of the wrong version.
const isEnabled = await client.evaluate('new-dashboard', {
userId: 'user_123'
});Render the right tree
Return the matching UI directly from the Server Component.
return isEnabled ? <NewDashboard /> : <OldDashboard />;
How evaluation works
On startup, the SDK fetches your project's flag configuration once and stores it in an in-memory cache. Every evaluate() call after that reads from the cache, not the network, so checking a flag is effectively free.
The cache refreshes in the background on a polling interval, so a change you make in the dashboard shows up in connected clients within seconds, without blocking any request.
If the API is temporarily unreachable — a network blip, or a cold start before the first fetch completes — evaluation falls back to a safe default instead of throwing, so a flag outage never becomes a feature outage.
Built for Next.js
Decide before you render
Evaluate in a Server Component or Middleware and return the right tree — no flicker between old and new UI.
One SDK, every rendering mode
@flagpilot/next re-exports the Node.js client for the server and the React hooks for client components, so you're not juggling two SDKs.
Works at the edge
The same evaluate() call runs in Node.js runtime routes and Edge Runtime Middleware.
TypeScript support
Server and client APIs share the same typed evaluate() signature, inferred end to end.
Async initialization
evaluate() is awaited server-side, so flags are resolved before any HTML streams to the browser.
App Router native
Built around Server Components, Server Actions, and Middleware from the ground up — no pages-router shims.
Common patterns in Next.js
export default async function Page() {
const isEnabled = await client.evaluate('new-dashboard', {
userId: 'user_123'
});
return isEnabled ? <NewDashboard /> : <OldDashboard />;
}Getting flags right from day one
Never expose secret keys
Secret API keys belong on your server only. Client-side code should use a public client key that can't modify flags.
Use stable user identifiers
Percentage rollouts hash the user ID you pass in. A stable ID means the same user always gets the same result.
Keep flags short-lived
A flag that never gets removed becomes a permanent branch in your code. Treat flags as temporary scaffolding, not config.
Remove stale flags regularly
Once a rollout reaches 100% and stays there, delete the flag and the old code path along with it.
Roll out gradually before going global
It's far cheaper to catch a bug at 5% of traffic than to catch it at 100%.
Use meaningful flag names
A key like new-checkout-flow-v2 is easier to audit six months later than test123.
- Use the secret API key only in Server Components, Route Handlers, and Middleware — never bundle it into client code.
- For Client Components, use @flagpilot/react's useFlag hook instead of calling evaluate() directly.
- Set the environment explicitly (development, staging, production) per deployment.
One SDK for Server Components, Client Components, and Middleware
Lightweight by default
Every SDK stays under 10KB and evaluates from an in-process cache, so adding flags never becomes a performance conversation.
REST API for everything
Every action available in the dashboard — creating flags, updating rollouts, reading audit history — is also a documented REST endpoint.
A CLI that matches the API
Script flag creation and rollout changes from your terminal or CI pipeline, using the same operations the dashboard performs.
Built for AI-assisted development
A native MCP server lets Cursor, Claude Code, or any MCP-compatible assistant create and toggle flags directly from a prompt.
Dead flag detection included
Flags that haven't been evaluated recently, or have sat at 100%/0% for months, are surfaced automatically instead of silently rotting in your codebase.
Developer experience first
No sales calls, no seat-based pricing negotiations — sign up, get an API key, and evaluate your first flag in the same session.
Fast enough to not think about
Evaluation logic must never slow down your app or disrupt a user flow — here's what that looks like in practice.
Frequently Asked Questions
Ready to ship features safely?
Install FlagPilot in Next.js in under a minute.