NextJS Pregen Flags Demo

[versecafe]

A simple well documented demo of how to work with @vercel/flags/next with instructions on how to create new flags, how they work, and a basic setup where the Icon changes color and the footer is displayed based off arbitrary logic running in the middleware.

Hope this helps anyone who was interested in the new flags architecture announced at SHIP, this helps fix a bunch of the annoyances of prior flag implementations requiring either making every page dynamic and having long TTFB or using PPR and having either skeleton animations, or handling layout shift as elements flicker and change if the flag and default are different.

Read Flag

import { FlagProps, flagName, precomputedFlags } from "@/flags";

export default async function Page({
  params,
}: FlagProps): Promise<JSX.Element> {
  const flag: flagType = await flagName(params.code, precomputedFlags);

  // ...
}

Create New Flag

export const colorFlag = flag<"r" | "g" | "b">({
  key: "color",
  async decide() {
    return Math.random() < 0.33
      ? "r"
      : Math.random() < 0.5
        ? "g"
        : "b";
  },
  description: "Color options.",
  defaultValue: "r",
  options: [
    { value: "r", label: "Red" },
    { value: "g", label: "Green" },
    { value: "b", label: "Blue" },
  ],
});

export const precomputedFlags: readonly Flag<any>[] = [colorFlag, ...otherFlags] as const;

Included Example Flags

• Vercel icon color: string, red, green, blue
• Show footer: boolean