GrowthBook Next.js Example

Configuration

First, create a free GrowthBook Account and add a new SDK Connection, selecting JavaScript (or React) as the language.
Next, in this example root, copy .env.local.example to .env.local and fill in the values from your GrowthBook SDK Connection.
Finally, create these two feature flags in your GrowthBook account. These will be referenced in the examples below.
- Key: feature1, Type: Boolean (true/false)
- Key: feature2, Type: String

Examples

Dynamic Server Rendering - Use flags within Server Components
Optimized Client Rendering - Use flicker-free flags within Client Components
Server/Client Hybrid - Combine the above two approaches in a single page
Static Pages - Use feature flags only during build time
Streaming Server Components - Supports experimental Partial Prerendering
Client Rendering (Unoptimized) - Fetch and use flags client-side (flicker warning)

How it Works

There is a middleware.ts file that ensures a UUID cookie is available before the first request is processed. This UUID is shared between the client and server and is used to assign consistent feature values to visitors when a percentage rollout or experiment is running.

Feature and experiment definitions are fetched from the server in all examples (except in the Unoptimized Client example). This ensures that the values are known at the initial render time, which lets us avoid the flicker commonly associated with client-side feature flags and experiments.

Server-fetched feature flags and experiment definitions are persisted in the Next.js data cache for 60 seconds (configurable in src/lib/growthbookServer.ts). For faster updates, there is a POST /revalidate route handler that can be triggered from an SDK Webhook in GrowthBook.

If an experiment is run server-side, data about which variation the user saw is sent to the client where an analytics event is triggered (or console.log in these examples). This happens via the GrowthBookTracking client component defined in src/lib/GrowthBookTracking.