Next.js SDK

The Next.js SDK (@clubedge/feature-flags-nextjs) provides a FeatureFlagsProvider and useFeatureFlag() hook for Next.js applications. It supports both the App Router (client components with hooks) and Server Components (direct isEnabled() calls during SSR/SSG).

Requirements

Next.js 14+
React 18+

Installation

pnpm add @clubedge/feature-flags-nextjs

App Router (client components)

1. Create a client and provider

// app/providers.tsx
'use client';

import { FeatureFlagsProvider } from '@clubedge/feature-flags-nextjs';
import { FeatureFlagsClient, ConsoleLogger } from '@clubedge/feature-flags-sdk-core';

const client = new FeatureFlagsClient({
  sdkKey: process.env.NEXT_PUBLIC_FF_SDK_KEY!,
  baseUrl: 'https://flags.clubedge.live',
  pollIntervalMs: 30_000,
  logger: new ConsoleLogger('nextjs-app'),
});

export function Providers({ children }: { children: React.ReactNode }) {
  return <FeatureFlagsProvider client={client}>{children}</FeatureFlagsProvider>;
}

2. Wrap your root layout

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

3. Use the hook in a client component

'use client';

import { useFeatureFlag } from '@clubedge/feature-flags-react';

export default function HomePage() {
  const enabled = useFeatureFlag('homepage-redesign', {
    userId: useCurrentUser().id,
  });

  return enabled ? <NewHomepage /> : <OldHomepage />;
}

Server Components (SSR / SSG)

For server-side evaluation, instantiate the client directly and call isEnabled() — no provider needed:

// app/dashboard/page.tsx
import { FeatureFlagsClient } from '@clubedge/feature-flags-sdk-core';

const client = new FeatureFlagsClient({
  sdkKey: process.env.FF_SDK_KEY!,  // server-only env var
  baseUrl: 'https://flags.clubedge.live',
});

export default async function DashboardPage() {
  await client.initialize();

  const enabled = client.isEnabled('new_dashboard', {
    userId: await getCurrentUserId(),
  });

  return enabled ? <NewDashboard /> : <OldDashboard />;
}

Pages Router

// pages/_app.tsx
import { FeatureFlagsProvider } from '@clubedge/feature-flags-nextjs';
import { FeatureFlagsClient } from '@clubedge/feature-flags-sdk-core';

const client = new FeatureFlagsClient({
  sdkKey: process.env.NEXT_PUBLIC_FF_SDK_KEY!,
  baseUrl: 'https://flags.clubedge.live',
});

export default function App({ Component, pageProps }) {
  return (
    <FeatureFlagsProvider client={client}>
      <Component {...pageProps} />
    </FeatureFlagsProvider>
  );
}

// pages/dashboard.tsx
import { useFeatureFlag } from '@clubedge/feature-flags-react';

export default function Dashboard({ user }) {
  const enabled = useFeatureFlag('new_dashboard', { userId: user.id });

  return enabled ? <NewDashboard /> : <LegacyDashboard />;
}

Security

The NEXT_PUBLIC_FF_SDK_KEY is bundled into the browser. Use it only for non-sensitive flags. For sensitive flags, use Server Components with FF_SDK_KEY (server-only) or the Node.js SDK.

Next steps

SDK configuration reference — full options, lifecycle, events
React SDK — for non-Next.js React apps
Evaluation API — direct HTTP for per-user evaluation

Essentials

Feature Flags

Requirements

Installation

App Router (client components)

1. Create a client and provider

2. Wrap your root layout

3. Use the hook in a client component

Server Components (SSR / SSG)

Pages Router

Security

Next steps

​Requirements

​Installation

​App Router (client components)

​1. Create a client and provider

​2. Wrap your root layout

​3. Use the hook in a client component

​Server Components (SSR / SSG)

​Pages Router

​Security

​Next steps

Requirements

Installation

App Router (client components)

1. Create a client and provider

2. Wrap your root layout

3. Use the hook in a client component

Server Components (SSR / SSG)

Pages Router

Security

Next steps