Next.js

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

yarn add @spotify-confidence/openfeature-server-provider-local

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:

// 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

Group medium length

Group placeholder

Features

Installation

Setup

1. Configure the provider

2. Add the provider to your layout

Usage

Server Components

Client Components

Resources

GitHub repository

OpenFeature JS SDK

Context

Apply events

​Features

​Installation

​Setup

​1. Configure the provider

​2. Add the provider to your layout

​Usage

​Server Components

​Client Components

​Resources

GitHub repository

OpenFeature JS SDK

Context

Apply events

Features

Installation

Setup

1. Configure the provider

2. Add the provider to your layout

Usage

Server Components

Client Components

Resources