Statsig

1
// flags.ts
2
import { statsigAdapter, type StatsigUser } from "@flags-sdk/statsig";
3
import { flag, dedupe } from "flags/next";
4
import type { Identify } from "flags";
5

6
export const identify = dedupe((async () => ({
7
  // implement the identify() function to add any additional user properties you'd like, see docs.statsig.com/concepts/user
8
  userID: "1234" //for example, set userID
9
})) satisfies Identify<StatsigUser>);
10

11
export const createFeatureFlag = (key: string) => flag<boolean, StatsigUser>({
12
  key,
13
  adapter: statsigAdapter.featureGate((gate) => gate.value, {exposureLogging: true}),
14
  identify,
15
});

1
// app/page.tsx
2
import { createFeatureFlag } from "../flags";
3

4
export default async function Page() {
5
  const enabled = await createFeatureFlag("my_feature_flag")(); //Disabled by default, edit in the Statsig console
6
  return <div>myFeatureFlag is {enabled ? "on" : "off"}</div>
7
};

1
"use client";
2

3
import type { Statsig } from "@flags-sdk/statsig";
4
import {
5
  StatsigProvider,
6
  useClientBootstrapInit,
7
} from "@statsig/react-bindings";
8
import { StatsigAutoCapturePlugin } from '@statsig/web-analytics';
9
 
10
export function DynamicStatsigProvider({ children, datafile,}: {
11
  children: React.ReactNode;
12
  datafile: Awaited<ReturnType<typeof Statsig.getClientInitializeResponse>>;
13
}) {
14
  if (!datafile) throw new Error("Missing datafile");
15
 
16
  const client = useClientBootstrapInit(
17
    process.env.NEXT_PUBLIC_STATSIG_CLIENT_KEY as string,
18
    datafile.user,
19
    JSON.stringify(datafile),
20
    { plugins: [ new StatsigAutoCapturePlugin() ] } //Optional, will add autocaptured web analytics events to Statsig
21
  );
22
 
23
  return (
24
    <StatsigProvider user={datafile.user} client={client} >
25
      {children}
26
    </StatsigProvider>
27
  );
28
}

1
// layout.tsx
2

3
//add to the top of your file
4
import { statsigAdapter } from "@flags-sdk/statsig";
5
import { DynamicStatsigProvider } from "./dynamic-statsig-provider";
6

7
// ...any other code you may have
8

9
 const Statsig = await statsigAdapter.initialize();
10
 const datafile = await Statsig.getClientInitializeResponse({userID: "1234"}, {hash: "djb2",});
11
 // minimal example, you'll want to customize your user object, likely using the flags SDK's identify function
12

13
 return (
14
    <DynamicStatsigProvider datafile={datafile}>
15
      {/* your other elements & children */}
16
    </DynamicStatsigProvider>
17
 );
18
}
19

1
'use client';
2
// page.tsx, minimal example
3

4
import { useGateValue } from "@statsig/react-bindings";
5

6
export default function Home() {
7
  const flag = useGateValue("my_feature_flag"); 
8

9
  return (
10
    <div>
11
      Flag Value: {flag ? 'PASSED' : 'FAILED'}
12
    </div>
13
  );
14
}