Next.js Feature Flags

Quick Start

1. Get your API key

Sign up at flagbit.anethoth.com to get your SDK key. The free tier includes 1,000 evaluations/day.

2. Install (optional)

npm install flagbit-client

3. Evaluate flags

// pages/dashboard.js — Server-side flag evaluation
export async function getServerSideProps(context) {
  const userId = context.req.cookies.userId || 'anonymous';

  const res = await fetch(
    'https://flagbit.anethoth.com/api/v1/evaluate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-SDK-Key': process.env.FLAGBIT_SDK_KEY
    },
    body: JSON.stringify({
      flag_key: 'new-dashboard-layout',
      context: { user_id: userId }
    })
  });
  const { value } = await res.json();

  return { props: { useNewLayout: value } };
}

export default function Dashboard({ useNewLayout }) {
  return useNewLayout ? <NewDashboard /> : <ClassicDashboard />;
}

// For App Router (Next.js 13+)
// app/dashboard/page.js
async function getFlag(key, ctx) {
  const res = await fetch(
    'https://flagbit.anethoth.com/api/v1/evaluate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-SDK-Key': process.env.FLAGBIT_SDK_KEY
    },
    body: JSON.stringify({ flag_key: key, context: ctx }),
    next: { revalidate: 60 } // Cache for 60s
  });
  return (await res.json()).value;
}

export default async function DashboardPage() {
  const showBeta = await getFlag('beta-features', {});
  return <Dashboard showBeta={showBeta} />;
}

Use Cases for Next.js

Server-Side Rendering

Evaluate flags at the edge in getServerSideProps — no client-side flicker, no loading states.

Middleware Guards

Use Next.js middleware to redirect users based on feature flags before the page even renders.

Incremental Adoption

Roll out new App Router pages alongside Pages Router — flag controls which version users see.

Preview Deployments

Enable experimental features only in Vercel preview deployments via environment-based flag rules.

How FlagBit Works

1

Create a Flag

Define flags in your FlagBit dashboard with targeting rules and rollout percentages.

2

Evaluate in Code

Call the evaluate endpoint from your Next.js app with user context for targeted rollouts.

3

Toggle Instantly

Enable, disable, or adjust rollouts in real-time. No redeployment needed.

FAQ

Server-side avoids UI flicker and is better for SEO-sensitive pages. Client-side is fine for interactive features where a brief loading state is acceptable.

Use the fetch cache option: next: { revalidate: 60 } to cache flag evaluations for 60 seconds in the App Router.

Yes — evaluate flags in getStaticProps with revalidate. The flag value updates on each ISR regeneration.

FlagBit's API works from Vercel Edge Functions. Use the evaluate endpoint directly — no SDK needed.