flagpost

Feature flags for Next.js. One file, full control.

[](https://www.npmjs.com/package/flagpost) [](./LICENSE)

Zero dependencies. Type-safe. Works with Server Components, Client Components, and Middleware.

---

npm install flagpost

// lib/flags.ts
import { createFlagpost } from "flagpost";

export const fp = createFlagpost({
  flags: {
    darkMode: {
      defaultValue: false,
      description: "Enable dark mode across the app",
    },
    heroVariant: {
      defaultValue: "control" as const,
      description: "A/B test for the hero section",
      rules: [{ value: "experiment" as const, percentage: 50 }],
    },
    maxItems: {
      defaultValue: 10,
      description: "Maximum items per page",
      rules: [{ value: 50, match: { plan: "pro" } }],
    },
  },
  context: async () => ({
    // Resolve user context however you like
    userId: "anonymous",
  }),
});

// app/page.tsx
"use client";
import { FlagpostProvider, Flag, FlagSwitch } from "flagpost/react";
import { fp } from "@/lib/flags";

export default function App() {
  return (
    <FlagpostProvider flagpost={fp}>
      <Flag name="darkMode" fallback={<LightTheme />}>
        <DarkTheme />
      </Flag>

      <FlagSwitch
        name="heroVariant"
        cases={{
          control: <HeroA />,
          experiment: <HeroB />,
        }}
      />
    </FlagpostProvider>
  );
}

// app/dashboard/page.tsx (Server Component)
import { flag, flags } from "flagpost/next";
import { fp } from "@/lib/flags";

export default async function Dashboard() {
  const darkMode = await flag(fp, "darkMode");
  const allFlags = await flags(fp);

  return (
    <div className={darkMode ? "dark" : ""}>
      <p>Max items: {allFlags.maxItems}</p>
    </div>
  )