> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.clubedge.live/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js SDK
> Integrate feature flags into Next.js with App Router and Pages Router support, including SSR and SSG.
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
```bash theme={null}
pnpm add @clubedge/feature-flags-nextjs
```
## App Router (client components)
### 1. Create a client and provider
```typescript theme={null}
// 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 {children};
}
```
### 2. Wrap your root layout
```tsx theme={null}
// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
### 3. Use the hook in a client component
```tsx theme={null}
'use client';
import { useFeatureFlag } from '@clubedge/feature-flags-react';
export default function HomePage() {
const enabled = useFeatureFlag('homepage-redesign', {
userId: useCurrentUser().id,
});
return enabled ? : ;
}
```
## Server Components (SSR / SSG)
For server-side evaluation, instantiate the client directly and call `isEnabled()` — no provider needed:
```tsx theme={null}
// 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 ? : ;
}
```
`NEXT_PUBLIC_*` environment variables are inlined into the client bundle and visible in browser devtools. Use them only for non-sensitive flags. Server Component examples above use the unprefixed `FF_SDK_KEY`, which stays server-side.
## Pages Router
```tsx theme={null}
// 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 (
);
}
```
```tsx theme={null}
// 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 ? : ;
}
```
## 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](/feature-flags/sdk/node).
## Next steps
* [SDK configuration reference](/feature-flags/reference/sdk-config) — full options, lifecycle, events
* [React SDK](/feature-flags/sdk/react) — for non-Next.js React apps
* [Evaluation API](/feature-flags/reference/evaluation-api) — direct HTTP for per-user evaluation