A package to enable feature-flag support on Next.js via cookies and environment variables

Overview

next-feature-flags

Add support for feature flags on Next.js based on cookies + environment variables.

How it works

It reads from cookies and Next.js's runtime config and provides an interface to enable and disable feature flags.

An interface to toggle feature flags on the browser is also provided via window.FEATURES.

It prioritizes feature flags from cookies over Next.js runtime config, meaning that if the same feature flag is set on both sides, the cookie one prevails.

Setup

import { configure } from 'next-feature-flags';

configure({
  featureFlags: ['SHOW_LOGIN_BANNER', 'USER_ESCALATE_PRIVILEGES'],
  allowCookieOverride: ['SHOW_LOGIN_BANNER']
})

featureFlags - lists the feature flags available

allowCookieOverride - lists the features flags which can be overriden by setting a cookie. This enables for some safety and not letting users override critical feature flags

Usage

import { configure } from 'next-feature-flags';

const { getFeatureFlag } = configure({
  featureFlags: ['SHOW_LOGIN_BANNER', 'USER_ESCALATE_PRIVILEGES'],
  allowCookieOverride: ['SHOW_LOGIN_BANNER']
})

const shouldShowLoginBanner = () => getFeatureFlag('SHOW_LOGIN_BANNER')

Note: next-feature-flags uses the FEATURE key both to write/read from cookies and from the environment, meaning the if you send SHOW_LOGIN_BANNER next-feature-flags will try to read from FEATURE_SHOW_LOGIN_BANNER and will read/write from that same cookie.

Possible improvement: customize this key.

Overriding feature flags on the browser

To override feature flags on the client, use the window.FEATURES interface.

On the console:

> window.FEATURES
> {SHOW_LOGIN_BANNER: {enable: fn, disable: fn}}
> window.FEATURES.SHOW_LOGIN_BANNER.enable()
> 'FEATURES_SHOW_LOGIN_BANNER=true'

Using this interface will set the cookie value (FEATURES_SHOW_LOGIN_BANNER), if you're using the feature flags on the server side (like getServerSideProps) make sure you reload your browser.

Whenever you want to turn it off, you can use the disable method the same way.

Using feature flags from the environment

next-feature-flags gets environment variables from Next.js runtime config (https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration).

To expose these variables there (and make them available both on the client and server side), use them the following way:

// next.config.js
module.exports = {
  serverRuntimeConfig: {
    SHOW_LOGIN_BANNER: process.env.FEATURE_SHOW_LOGIN_BANNER, // Pass through env variables
  },
  publicRuntimeConfig: {
    SHOW_LOGIN_BANNER: process.env.NEXT_PUBLIC_FEATURE_SHOW_LOGIN_BANNER
  },
}

By having the variables with the same name (even though one is getting from the public namespace and the other not) makes it possible for next-feature-flags to get them. It will prioritize the value in serverRuntimeConfig over publicRuntimeConfig.

You might also like...

CTF (Capture The Flag) is a type of information security competition that challenges contestants to find solutions or complete various tasks.

CTF (Capture The Flag) is a type of information security competition that challenges contestants to find solutions or complete various tasks.

WHAT IS CTF? CTF (Capture The Flag) is a type of information security competition that challenges contestants to find solutions or complete various ta

Nov 26, 2022

Google translate dropdown customize with country flag

Google translate dropdown customize with country flag

Flag google trasnalte demo without google bar and logo Screenshot How to use this 1. Create a country checklist containing languages from which you’ll

Oct 11, 2022

StarkNet support extension for VSCode. Visualize StarkNet contracts: view storage variables, external and view functions, and events.

StarkNet support extension for VSCode. Visualize StarkNet contracts: view storage variables, external and view functions, and events.

StarkNet Explorer extension This VSCode extension quickly shows relevant aspects of StarkNet contracts: Storage variables of the current contract, and

Nov 4, 2022

Query for CSS brower support data, combined from caniuse and MDN, including version support started and global support percentages.

css-browser-support Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentage

Nov 2, 2022

Node.js package with a customized HTTP and HTTPS agents to prevent SSRF with hosts validations and custom DNS feature.

http-agent-dns This is a Node.js package with a customized HTTP and HTTPS agents to prevent SSRF with hosts validations with a possibility to use a cu

Jul 21, 2022

Package fetcher is a bot messenger which gather npm packages by uploading either a json file (package.json) or a picture representing package.json. To continue...

package-fetcher Ce projet contient un boilerplate pour un bot messenger et l'executable Windows ngrok qui va permettre de créer un tunnel https pour c

Mar 29, 2022

Fully undetected stealer (steals wallets, passwords, cookies, modifies discord client like piratestealer etc.)

Fully undetected stealer (steals wallets, passwords, cookies, modifies discord client like piratestealer etc.)

doenerium (CURRENTLY NOT WORKING BECAUSE OF OBFUSCATION; fixing later) Fully undetected stealer (0/67) I obfuscated this to prevent my stuff being ski

Nov 12, 2022

Prefill forms based on URL-parameters, cookies or the sessionStore.

Form prefill plugin for jQuery Built by more onion as a part of Campaignion. Installation import { formPrefill } from "path/to/formprefill.min.js"; No

Sep 6, 2022
Comments
  • feat: add state to browser interface

    feat: add state to browser interface

    • Adds API to get state of a feature flag from cookie while on browser via window.FEATURE_ABCD.state()
    • Adds (or tries to) add github actions to run tests on PRs
    opened by asantos00 0
  • fix(window.FEATURES.feature): state function reads from environment when cookie not available

    fix(window.FEATURES.feature): state function reads from environment when cookie not available

    Changelist:

    • One line _stringToBool
    • Add getFeatureFromEnv
      • Ensure getFeatureFromEnv and getFeatureFromCookie have similar return types
    • Add spec
      • "shows state of the feature from env when cookie not available"
      • "shows state false when feature not available"
    • Change spec
      • "shows state of the feature from cookie"
        • Compare against defined values instead of truthy and falsey
    • Refactor variable names to be similar across functions
    opened by FranciscoKloganB 2
Releases(v0.6.5)
  • v0.6.5(May 26, 2022)

  • v0.6.0(May 20, 2022)

    What's Changed

    • feat: add state to browser interface by @asantos00 in https://github.com/asantos00/next-feature-flags/pull/3

    Full Changelog: https://github.com/asantos00/next-feature-flags/compare/v0.0.5...v0.6.0

    Source code(tar.gz)
    Source code(zip)
  • v0.0.5(May 11, 2022)

    What's Changed

    • test: add tests to major cases by @asantos00 in https://github.com/asantos00/next-feature-flags/pull/1
    • fix: README and build sciprt by @asantos00 in https://github.com/asantos00/next-feature-flags/pull/2

    Full Changelog: https://github.com/asantos00/next-feature-flags/commits/v0.0.5

    Source code(tar.gz)
    Source code(zip)
Owner
Alexandre Santos
Alexandre Santos
DGPreview - Make UIKit project enable preview feature of SwiftUI

DGPreview Make UIKit project enable preview feature of SwiftUI Requirements iOS

donggyu 5 Feb 14, 2022
✨ A tool for versioning, securing and easily sharing environment variables

ev a tool for versioning, securing and easily sharing environment variables initializing • commands • using in your project Features ⏱ Version control

henrycunh 61 Oct 18, 2022
A custom action for setting GitHub Workflow environment variables with YAML configuration files.

yaml-env-action - A custom action for setting GitHub Workflow environment variables with YAML configuration files. Introduction yaml-env-action is a c

Piper Dougherty 3 Aug 3, 2022
Displays environment variables on your Grafana dashboards

Displays environment variables on your Grafana dashboards Introduction The Environment data source is a plugin for Grafana that returns environment va

Volkov Labs 6 Nov 6, 2022
Loads environment variables from .env for nodejs projects.

dotenv Written in typescript, full testing. It can loads environment variables from a .env file into process.env or parse <key>=<value> string Install

Berlin 102 Sep 23, 2022
🔑 Loads environment variables from .env for nodejs projects with safe

env-safe env-safe is module that loads that loads environment variables from a .env file into process.env with type-safe. And can also validate the ty

Creatrip 8 Nov 21, 2022
mirrord lets you easily mirror traffic from your production environment to your development environment.

mirrord lets you easily mirror traffic from your Kubernetes cluster to your development environment. It comes as both Visual Studio Code extension and a CLI tool.

MetalBear 2k Nov 17, 2022
A script for defending the Canadian flag on r/place 2022

ca-place-script A script for defending the Canadian flag on r/place 2022. This script will automate your tile placements to defend the grey outline an

null 3 Apr 4, 2022
This work is an overnight with 84436, an overlay code forked from Osu! community but for ``flag of Vietnam`` in r/place 2022

flag-of-vietnam-rplace2022 This work is a overnight with 84436, an overlay code forked from Osu! community but for flag of Vietnam Installation Xài Ta

Đoàn Đình Toàn 10 Nov 2, 2022
Help Ukraine - add ribbon with Ukraine flag into the website you manage, show the anti-war message to Russian users, or block them from your service.

?? Stop war on Ukraine ?? Help Ukraine - add ribbon with Ukraine flag into the website you manage, show the anti-war message to Russian users, or bloc

Pavol Hejný 45 Oct 21, 2022