Next.js SDK

1
import { cookies } from "next/headers";
2
import { evaluateFlags, flagsClient, getDefinitions } from "@unleash/nextjs";
3
4
const getFlag = async () => {
5
  const cookieStore = cookies();
6
  const sessionId =
7
    cookieStore.get("unleash-session-id")?.value ||
8
    `${Math.floor(Math.random() * 1_000_000_000)}`;
9
10
  const definitions = await getDefinitions({
11
    fetchOptions: {
12
      next: { revalidate: 15 }, // Cache layer like Unleash Proxy!
13
    },
14
  });
15
16
  const { toggles } = evaluateFlags(definitions, {
17
    sessionId,
18
  });
19
  const flags = flagsClient(toggles);
20
21
  return flags.isEnabled("nextjs-example");
22
};
23
24
export default async function Page() {
25
  const isEnabled = await getFlag();
26
27
  return (
28
    <p>
29
      Feature flag is{" "}
30
      <strong>
31
        <code>{isEnabled ? "ENABLED" : "DISABLED"}</code>
32
      </strong>
33
      .
34
    </p>
35
  );
36
}

1
import type { AppProps } from "next/app";
2
import { FlagProvider } from "@unleash/nextjs/client";
3
4
export default function App({ Component, pageProps }: AppProps) {
5
  return (
6
    <FlagProvider>
7
      <Component {...pageProps} />
8
    </FlagProvider>
9
  );
10
}

1
import {
2
  flagsClient,
3
  getDefinitions,
4
  evaluateFlags,
5
  getFrontendFlags,
6
  type IVariant,
7
} from "@unleash/nextjs";
8
import type { GetStaticProps, NextPage } from "next";
9
10
type Data = {
11
  isEnabled: boolean;
12
  variant: IVariant;
13
};
14
15
const ExamplePage: NextPage<Data> = ({ isEnabled, variant }) => (
16
  <>
17
    Flag status: {isEnabled ? "ENABLED" : "DISABLED"}
18
    <br />
19
    Variant: {variant.name}
20
  </>
21
);
22
23
export const getStaticProps: GetStaticProps<Data> = async (_ctx) => {
24
  /* Using server-side SDK: */
25
  const definitions = await getDefinitions();
26
  const context = {}; // optional, see https://docs.getunleash.io/concepts/unleash-context
27
  const { toggles } = evaluateFlags(definitions, context);
28
29
  /* Or with the Frontend API */
30
  // const { toggles } = await getFrontendFlags({ context });
31
32
  const flags = flagsClient(toggles);
33
34
  return {
35
    props: {
36
      isEnabled: flags.isEnabled("nextjs-example"),
37
      variant: flags.getVariant("nextjs-example"),
38
    },
39
  };
40
};
41
42
export default ExamplePage;

1
import {
2
  flagsClient,
3
  evaluateFlags,
4
  getDefinitions,
5
  type IVariant,
6
} from "@unleash/nextjs";
7
import type { GetServerSideProps, NextPage } from "next";
8
9
type Data = {
10
  isEnabled: boolean;
11
};
12
13
const ExamplePage: NextPage<Data> = ({ isEnabled }) => (
14
  <>Flag status: {isEnabled ? "ENABLED" : "DISABLED"}</>
15
);
16
17
export const getServerSideProps: GetServerSideProps<Data> = async (ctx) => {
18
  const sessionId =
19
    ctx.req.cookies["unleash-session-id"] ||
20
    `${Math.floor(Math.random() * 1_000_000_000)}`;
21
  ctx.res.setHeader("set-cookie", `unleash-session-id=${sessionId}; path=/;`);
22
23
  const context = {
24
    sessionId, // needed for stickiness
25
    // userId: "123" // etc
26
  };
27
28
  const definitions = await getDefinitions(); // Uses UNLEASH_SERVER_API_URL
29
  const { toggles } = evaluateFlags(definitions, context);
30
31
  const flags = flagsClient(toggles); // instantiates a static (non-syncing) unleash-proxy-client
32
33
  return {
34
    props: {
35
      isEnabled: flags.isEnabled("nextjs-example")
36
    },
37
  };
38
};
39
40
export default ExamplePage;

1
import App, { AppContext, type AppProps } from "next/app";
2
import {
3
  FlagProvider,
4
  getFrontendFlags,
5
  type IMutableContext,
6
  type IToggle,
7
} from "@unleash/nextjs";
8
9
type Data = {
10
  toggles: IToggle[];
11
  context: IMutableContext;
12
};
13
14
export default function CustomApp({
15
  Component,
16
  pageProps,
17
  toggles,
18
  context,
19
}: AppProps & Data) {
20
  return (
21
    <FlagProvider
22
      config={{
23
        bootstrap: toggles,
24
        context,
25
      }}
26
    >
27
      <Component {...pageProps} />
28
    </FlagProvider>
29
  );
30
}
31
32
CustomApp.getInitialProps = async (ctx: AppContext) => {
33
  const context = {
34
    userId: "123",
35
  };
36
37
  const { toggles } = await getFrontendFlags(); // use Unleash Proxy
38
39
  return {
40
    ...(await App.getInitialProps(ctx)),
41
    bootstrap: toggles,
42
    context, // pass context along so client can refetch correct values
43
  };
44
};

1
// app/layout.tsx
2
import { UnleashToolbarProvider } from '@unleash/toolbar/next';
3
import '@unleash/toolbar/toolbar.css';
4
5
export default function RootLayout({ children }) {
6
  return (
7
    <html>
8
      <body>
9
        <UnleashToolbarProvider
10
          config={{
11
            url: process.env.NEXT_PUBLIC_UNLEASH_URL!,
12
            clientKey: process.env.NEXT_PUBLIC_UNLEASH_CLIENT_KEY!,
13
            appName: 'my-next-app',
14
          }}
15
          toolbarOptions={
16
            process.env.NODE_ENV !== 'production'
17
              ? { themePreset: 'dark' }
18
              : undefined
19
          }
20
        >
21
          {children}
22
        </UnleashToolbarProvider>
23
      </body>
24
    </html>
25
  );
26
}

1
// app/server-page/page.tsx
2
import { cookies } from 'next/headers';
3
import { getDefinitions, evaluateFlags, flagsClient } from '@unleash/nextjs';
4
import { applyToolbarOverrides } from '@unleash/toolbar/next/server';
5
6
export default async function ServerPage() {
7
  const definitions = await getDefinitions({
8
    fetchOptions: { next: { revalidate: 15 } },
9
  });
10
11
  const cookieStore = await cookies();
12
  const modifiedDefinitions = applyToolbarOverrides(definitions, cookieStore);
13
14
  const { toggles } = evaluateFlags(modifiedDefinitions, { userId: 'user-123' });
15
  const flags = flagsClient(toggles);
16
17
  return <div>{flags.isEnabled('feature') ? 'ON' : 'OFF'}</div>;
18
}

1
const enabled = flags.isEnabled("nextjs-example");
2
3
await flags.sendMetrics();

1
import {evaluateFlags, flagsClient, getDefinitions,} from "@unleash/nextjs";
2
3
export default async function Page() {
4
  const definitions = await getDefinitions({
5
    fetchOptions: {
6
      next: { revalidate: 15 }, // Cache layer like Unleash Proxy!
7
    },
8
  });
9
  const context = {};
10
  const { toggles } = evaluateFlags(definitions, context);
11
  const flags = flagsClient(toggles);
12
13
  const enabled = flags.isEnabled("nextjs-example");
14
15
  // await client.sendMetrics().catch(() => {}); // blocking metrics
16
  flags.sendMetrics().catch(() => {}); // non-blocking metrics
17
18
  return  <>Flag status: {enabled ? "ENABLED" : "DISABLED"}</>
19
}

1
import { evaluateFlags, flagsClient, getDefinitions } from "@unleash/nextjs";
2
import type { GetServerSideProps, NextPage } from "next";
3
4
type Data = {
5
  isEnabled: boolean;
6
};
7
8
export const getServerSideProps: GetServerSideProps<Data> = async () => {
9
  const definitions = await getDefinitions();
10
  const context = {};
11
  const { toggles } = evaluateFlags(definitions, context);
12
  const flags = flagsClient(toggles);
13
14
  const enabled = flags.isEnabled("nextjs-example");
15
16
  // await client.sendMetrics().catch(() => {}); // blocking metrics
17
  flags.sendMetrics().catch(() => {}); // non-blocking metrics
18
19
  return {
20
    props: { isEnabled: enabled },
21
  };
22
};
23
24
const ExamplePage: NextPage<Data> = ({ isEnabled }) => (
25
  <>Flag status: {isEnabled ? "ENABLED" : "DISABLED"}</>
26
);
27
28
export default ExamplePage;

1
export async function middleware(req: NextRequest, event: NextFetchEvent) {
2
    // ...
3
    const evaluated = evaluateFlags(definitions, context);
4
    const flags = flagsClient(evaluated.toggles)
5
    const isEnabled = flags.isEnabled("example-flag")
6
7
    event.waitUntil(flags.sendMetrics())
8
    // ...
9
}