ConfigCat is a service for feature flag and configuration management. In this template you'll be able to use feature flags at the edge.
ConfigCat is a service for feature flag and configuration management. In this demo you'll be able to use feature flags at the edge.
By A/B testing directly on the server-side, you'll reduce layout shift from client-loaded experiments and improving your site's performance with smaller JavaScript bundles.
https://edge-functions-feature-flag-configcat.vercel.app
You can choose from one of the following two methods to use this repository:
Deploy the example using Vercel:
Execute create-next-app
with pnpm to bootstrap the example:
pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/feature-flag-configcat feature-flag-configcat
You'll need to have an account with ConfigCat. Once that's done, copy the .env.example
file in this directory to .env.local
(which will be ignored by Git):
cp .env.example .env.local
Then open .env.local
and set the SDK key to match the one in your ConfigCat dashboard. Your key should be right under your feature flags.
The demo uses the following 4 feature flags, make sure to add them to your ConfigCat environment:
Next, run Next.js in development mode:
pnpm dev
The /about
and /marketing
pages each have a _middleware.ts
file that takes care of doing the AB testing for each page, using a different feature in ConfigCat.
The index page (pages/index.tsx) also shows how to do AB testing under the same path, in SSR and client-side.
We fetch and save the feature flags in JSON at build time to avoid doing any kind of data fetching at the edge, check scripts/configcat.js to see how it works.
Deploy it to the cloud with Vercel (Documentation).
ConfigCat is a service for feature flag and configuration management. In this template you'll be able to use feature flags at the edge.
ConfigCat is a service for feature flag and configuration management. In this demo you'll be able to use feature flags at the edge.
By A/B testing directly on the server-side, you'll reduce layout shift from client-loaded experiments and improving your site's performance with smaller JavaScript bundles.
https://edge-functions-feature-flag-configcat.vercel.app
You can choose from one of the following two methods to use this repository:
Deploy the example using Vercel:
Execute create-next-app
with pnpm to bootstrap the example:
pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/feature-flag-configcat feature-flag-configcat
You'll need to have an account with ConfigCat. Once that's done, copy the .env.example
file in this directory to .env.local
(which will be ignored by Git):
cp .env.example .env.local
Then open .env.local
and set the SDK key to match the one in your ConfigCat dashboard. Your key should be right under your feature flags.
The demo uses the following 4 feature flags, make sure to add them to your ConfigCat environment:
Next, run Next.js in development mode:
pnpm dev
The /about
and /marketing
pages each have a _middleware.ts
file that takes care of doing the AB testing for each page, using a different feature in ConfigCat.
The index page (pages/index.tsx) also shows how to do AB testing under the same path, in SSR and client-side.
We fetch and save the feature flags in JSON at build time to avoid doing any kind of data fetching at the edge, check scripts/configcat.js to see how it works.
Deploy it to the cloud with Vercel (Documentation).