Skip to main content
The Confidence Next.js SDK provides feature flag evaluation for Next.js applications using the 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

npm install @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: 
// 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: 
// 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 (
    <html>
      <body>
        <ConfidenceProvider context={context}>{children}</ConfidenceProvider>
      </body>
    </html>
  );
}

​
Usage

​
Server Components

Use the getFlag function in React Server Components: 
// 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 ? <NewLayout /> : <OldLayout />;
}

​
Client Components

Use the useFlag hook in Client Components: 
// 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 <button>New Feature</button>;
}

​
Resources

GitHub repository

Source code and examples

OpenFeature JS SDK

OpenFeature documentation

Context

Configure evaluation context

Apply events

Understand flag assignment tracking