> ## Documentation Index
> Fetch the complete documentation index at: https://confidence.spotify.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
> Confidence SDK for feature flag evaluation in Next.js applications with App Router support.
The Confidence Next.js SDK provides feature flag evaluation for Next.js applications using the [Confidence Resolver](https://github.com/spotify/confidence-resolver)—a Rust-based resolver that runs as WebAssembly. It supports both React Server Components and Client Components with the App Router.
## Features
* **Local evaluation**: Flag rules evaluate on your infrastructure in microseconds
* **App Router support**: Works with React Server Components and Client Components
* **OpenFeature compatible**: Standard feature flag API through OpenFeature provider
* **Background sync**: Flag rules and logging sync with Confidence in the background
* **High reliability**: No network dependency at evaluation time
## Installation
```bash npm theme={null}
npm install @spotify-confidence/openfeature-server-provider-local
```
```bash yarn theme={null}
yarn add @spotify-confidence/openfeature-server-provider-local
```
```bash pnpm theme={null}
pnpm add @spotify-confidence/openfeature-server-provider-local
```
**Requirements**: Node.js 18+ with WebAssembly support.
## Setup
### 1. Configure the provider
Create a file to initialize the Confidence provider:
```typescript theme={null}
// lib/confidence.ts
import { OpenFeature } from '@openfeature/server-sdk';
import { createConfidenceServerProvider } from '@spotify-confidence/openfeature-server-provider-local';
const provider = createConfidenceServerProvider({
flagClientSecret: process.env.CONFIDENCE_FLAG_CLIENT_SECRET!,
});
// Initialize provider at startup
await OpenFeature.setProviderAndWait(provider);
```
### 2. Add the provider to your layout
Wrap your application with the `ConfidenceProvider`:
```tsx theme={null}
// app/layout.tsx
import { ConfidenceProvider } from '@spotify-confidence/openfeature-server-provider-local/react-server';
import './lib/confidence';
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const context = {
targetingKey: 'user-123',
country: 'US',
};
return (
{children}
);
}
```
## Usage
### Server Components
Use the `getFlag` function in React Server Components:
```tsx theme={null}
// app/page.tsx
import { getFlag } from '@spotify-confidence/openfeature-server-provider-local/react-server';
export default async function Page() {
const showNewLayout = await getFlag('page-layout.showNewLayout', false, {
targetingKey: 'user-123'
});
return showNewLayout ? : ;
}
```
### Client Components
Use the `useFlag` hook in Client Components:
```tsx theme={null}
// components/FeatureButton.tsx
'use client';
import { useFlag } from '@spotify-confidence/openfeature-server-provider-local/react-client';
export function FeatureButton() {
const enabled = useFlag('new-feature.enabled', false);
if (!enabled) return null;
return ;
}
```
## Resources
Source code and examples
OpenFeature documentation
Configure evaluation context
Understand flag assignment tracking