Adding a feature behind a flag

Let's start by creating a new feature flag.

flags.ts

import { flag } from "flags/next";

export const enableSummerSale = flag<boolean>({
  key: "summer-sale",
  description: "Shows a bright yellow banner for a 20% discount",
  defaultValue: false,
  decide() {
    return true;
  },
});

We can now use this feature flag on our page.

app/(main)/page.tsx

import { ImageGallery } from "@/components/image-gallery";
import { ProductDetails } from "@/components/product-detail-page/product-details";
import { ProductHeader } from "@/components/product-detail-page/product-header";
import { AddToCart } from "@/app/(main)/add-to-cart";
import { ColorPicker } from "@/components/product-detail-page/color-picker";
import { SizePicker } from "@/components/product-detail-page/size-picker";
import { ProductDetailPageProvider } from "@/components/utils/product-detail-page-context";
import { Main } from "@/components/main";
import { enableSummerSale } from "@/flags"; 
import { SummerSaleBanner } from "@/components/banners/summer-sale-banner"; 

export default async function Page() {
  const summerBanner = await enableSummerSale(); 
  return (
    <ProductDetailPageProvider>
      {summerBanner ? <SummerSaleBanner /> : null} 
      <Main>
        <div className="lg:grid lg:auto-rows-min lg:grid-cols-12 lg:gap-x-8">
          <ProductHeader />
          <ImageGallery />

          <div className="mt-8 lg:col-span-5">
            <ColorPicker />
            <SizePicker />
            <AddToCart />
            <ProductDetails />
          </div>
        </div>
      </Main>
    </ProductDetailPageProvider>
  );
}

Open localhost:3000 and reload a few times. You should see the summer sale banner for half of the requests.

You've just crated and used your first feature flag with the Flags SDK!

Feature Flags are functions

implementation can change without having to touch the call side
works with editor tools like "Find All References"

consistently uses the same default value across the whole application

allows keeping feature flags private
prevents layout shifts and loading spinners by default
lowers code size as only relevant code is sent to the browser

Adding a feature behind a flag

Feature Flags are functions

Feature Flags declare their default value

Feature Flags are only ever evaluated on the server

On this page