Evaluation Context

Shows how to serve different values to different users.

Enable the feature flag for Chrome users only.

flags.ts

import { flag } from "flags/next";

type Entities = { browser: "Safari" | "Chrome" } 

export const enableSummerSale = flag<boolean, Entities>( 
  {
    key: "summer-sale",
    description: "Shows a bright yellow banner for a 20% discount",
    defaultValue: false,
    identify({ headers, cookies }) { 
      const ua = headers.get("user-agent") || ""; 
      const isSafari = ua.includes("Safari") && !ua.includes("Chrome"); 
      return { browser: isSafari ? "Safari" : "Chrome" }; 
    },
    decide({ entities }) { 
      return entities?.browser === "Chrome"; 
    }, 
  }
);

Cache the identify function for the current request using dedupe.

It's like React's unstable_cache but middleware friendly.

flags.ts

import { flag, dedupe } from "flags/next"; 

type Entities = { browser: "Safari" | "Chrome" }

const identify = dedupe(({ headers, cookies }): Entities => { 
  const ua = headers.get("user-agent") || ""; 
  const isSafari = ua.includes("Safari") && !ua.includes("Chrome"); 
  return { browser: isSafari ? "Safari" : "Chrome" }; 
}); 

export const enableSummerSale = flag<boolean, Entities>({
  key: "summer-sale",
  description: "Shows a bright yellow banner for a 20% discount",
  defaultValue: false,
  identify, 
  decide({ entities }) {
    return entities?.browser !== "Safari";
  },
});