Feature Flags in Next.JS

Feature flags are great, they are also even better when the developer experience of integrating and using them is easy.

With lots of choice available today on the market I wanted to find a solution that worked well for developers who build projects on the side and specifically in Next.JS.

So that lead me to search for a tool which ticked the following boxes:

• It has a gracious free tier
• Easy integration into my project
• Is small in size (don't want to be bloating projects).

This is where I discovered a tool which ticked all of them.

Introducing... HappyKit

I did some research on this tool and implemented it into my main pet project that I am working on right now and I have been blown away.

Firstly, it's npm package is both easy to use and small in size.

Less than 5kb in size.

How to integrate

npm i @happykit/flags

OR

yarn add @happykit/flags

Then create a flags.config.ts file at root with the following contents:

import { configure } from "@happykit/flags/config";

configure({
  envKey: process.env.NEXT_PUBLIC_FLAGS_ENVIRONMENT_KEY
});

Then import this into your _app.tsx:

import '../flags.config'

Lastly, add the following to your .env.local:

NEXT_PUBLIC_FLAGS_ENVIRONMENT_KEY=flags_pub_development_xxxxxxxxxx

To find the value for your environment variable:

1. Go to the portal happykit.dev
2. Go to settings
3. Go to keys and pick which environment you want to target (i'd advise development in local building).

They also support a preview environment and a production environment out of the box. Which is a nice feature for free.

The library fully supports SSR and I can demonstrate this with the below code snippet:

import type { NextPage, NextPageContext } from "next";
import { useFlags } from "@happykit/flags/client";
import { getFlags } from "@happykit/flags/server";
import {
  ErrorInitialFlagState,
  Flags,
  SuccessInitialFlagState,
} from "@happykit/flags/dist/declarations/src/types";

export const getServerSideProps = async (context: NextPageContext) => {
  const { initialFlagState } = await getFlags({ context });
  return { props: { initialFlagState } };
};

interface IHomePageProps {
  initialFlagState: SuccessInitialFlagState<Flags> | ErrorInitialFlagState;
}

const Home: NextPage<IHomePageProps> = (props) => {
  const { flags } = useFlags({ initialState: props.initialFlagState });

return (
   <div>Hello {flags.exampleFlag ? 'World' : 'Not turned on'}</div>
  );
};

export default Home;

The above is really neat because this now means that we get the initial flag values on the server when a client requests the page and we pass it to them. Rather than having the client make that extra initial call to get the values for our flags.

Secondly, the portal is very easy to use.

It guides you through creating feature flags and is full of code samples on how to get started. It's very intuitive to use and i've had absolutely no problem with navigating my way through it which is always a reassuring sign when picking a tool to aid your development of projects.

Thirdly, the free tier is good.

When developing pet projects we want the world for nothing. HappyKit gives you a free tier consisting of:

• AB testing of feature flags
• Up to 100,000 requests a month
• 5 feature flags on the go at once.

This is good, but I leave it at good. There are other competitors that offer more feature flags in their free tier and I would hope that this changes in the future for HappyKit. But given the fact that it offers all the other things mentioned so far in this article. It's still a winner for me.

Closing thoughts

Feature flags are an important tool in todays development ecosystem. Testing features before releasing to the masses, and not being dependent on stale feature branches from master is an important thing to avoid. Therefore finding a good tool for the job is high on the priority list. I personally like how HappyKit is laid out and I intend to keep using it. A key theme for me has been Developer Experience and how that affects my decision making when using tools. Which is why I like this tool in particular. Just like the reason for why I love using tailwind for my UI's. It's DX is amazing.

Let me know in the comments below what tools you use to manage feature flags in Next.JS 👇

Links:

HappyKit