https://github.com/happykit/flags

⛳️ Feature Flags for Next.js
https://github.com/happykit/flags

feature-flags feature-toggles nextjs react reactjs

Last synced: about 21 hours ago
JSON representation

⛳️ Feature Flags for Next.js

• Host: GitHub
• URL: https://github.com/happykit/flags
• Owner: happykit
• License: mit
• Created: 2020-09-06T19:33:15.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-02T12:13:32.000Z (9 months ago)
• Last Synced: 2024-12-06T08:03:12.666Z (8 days ago)
• Topics: feature-flags, feature-toggles, nextjs, react, reactjs
• Language: TypeScript
• Homepage: https://happykit.dev
• Size: 2.08 MB
• Stars: 1,033
• Watchers: 6
• Forks: 11
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - flags

README

        


  





  Documentation

   • 

  Examples

   • 

  Full Tutorial

   • 

  happykit.dev

   • 

  @happykitdev






 

Add Feature Flags to your Next.js application with a single React Hook. This package integrates your Next.js application with HappyKit Flags. Create a free [happykit.dev](https://happykit.dev/signup) account to get started.

## Key Features

- written for Next.js

- integrate using a simple `useFlags()` hook or `getFlags()` function

- supports App Router (Server Components & Client Components)

- only 2 kB gzipped size

- extremely fast flag responses (~50ms)

- supports Server-Side Rendering and Static Site Generation

- supports Middleware and Edge Functions

- supports User Targeting, Custom Rules and Rollouts




  Want to see a demo?

  

  






## Documentation

See the [full documentation](https://github.com/happykit/flags/tree/master/package) for setup instructions and usage guides.

## Examples

This is roughly what the usage of feature flags looks like once you're up and running.

```js

// pages/index.js

import { useFlags } from "flags/client";

export default function IndexPage(props) {

  const flagBag = useFlags();

  return flagBag.flags.greeting === "dog" ? "Who's a good boye" : "Hello";

}

```

The self documenting examples at [flags.happykit.dev](https://flags.happykit.dev/) show how to use `@happykit/flags` for client-side, static and server-side rendering.

## Full Tutorial

A full tutorial including setup instructions is published on [frontend-digest.com](https://medium.com/frontend-digest/using-feature-flags-in-next-js-c5c8d0795a2?source=friends_link&sk=d846a29f376acf9cfa41e926883923ab).