Skip to content

Next.js SDK

The Next.js SDK uses @flags-gg/react-library — the same package as the React SDK. It works with both the App Router and Pages Router.

Installation

pnpm add @flags-gg/react-library

npm install @flags-gg/react-library

yarn add @flags-gg/react-library

Quick Start (App Router)

Create a client provider component:

"use client";
import { FlagsProvider } from "@flags-gg/react-library";

export default function ClientProvider({ children }: { children: React.ReactNode }) {
  return (
    <FlagsProvider options={{
      projectId: "YOUR_PROJECT_ID",
      agentId: "YOUR_AGENT_ID",
      environmentId: "YOUR_ENVIRONMENT_ID",
    }}>
      {children}
    </FlagsProvider>
  );
}

Wrap your layout:

import ClientProvider from "~/components/ClientProvider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ClientProvider>
          <main>{children}</main>
        </ClientProvider>
      </body>
    </html>
  );
}

Use flags in client components:

"use client";
import { useFlags } from "@flags-gg/react-library";

export function MyComponent() {
  const { is } = useFlags();

  if (!is("intro")?.enabled()) {
    return null;
  }

  return <div>Show component</div>;
}

Next Steps