Using Abby with Next.js

Abby was built to be the best solution for Feature Flags, A/B Testing and Remote Configuration variables in Next.js. It deeply integrates with Next.js and provides a seamless developer experience.

Installation

Install the @tryabby/next package using your favorite package manager:

npm i @tryabby/next

Configuration

In order to use Abby you need to create a free account at tryabby.com (opens in a new tab) first.

You can then use the button in the top right corner of the dashboard to easily copy your Abby config.

Create a file called abby.config.ts in the root folder of your project. That's it! You're ready to go!

For this example my abby.config.ts file looks like this:

// abby.config.ts
import { defineConfig } from "@tryabby/next";
 
export default defineConfig({
  projectId: "YOUR_PROJECT",
  // For testing purposes we only want to use the production environment
  currentEnvironment: "production",
  environments: ["production"],
  tests: {
    theme: {
      variants: ["light", "dark"],
    },
  },
  flags: ["useDarkMode"],
  remoteConfig: {
    customButtonText: "String",
  },
});

After that you need to create a file called lib/abby.ts in your project. This file will contain all the code (e.g. the Abby hooks) that is needed to integrate Abby into your app.

// lib/abby.ts
 
import { createAbby } from "@tryabby/next";
import config from "../abby.config";
 
export const { withAbby, AbbyProvider, useFeatureFlag, useAbby, withAbbyApiHandler, withAbbyEdge, useRemoteConfig } = createAbby(config);
 
```
 
Now you will need to wrap your app with the `AbbyProvider` component. This is done in the `_app.tsx` file.
If you also wrap your app with `withAbby`, you will have access to the Feature Flags for Server Side Rendering or Static Generation as well.
 
This is highly recommended so that there is no flicker on the inital load of your app. It also allows for proper crawling of your app by search engines.
 
```tsx
// _app.tsx
import { AbbyProvider } from "lib/abby";
 
function MyApp({ Component, pageProps: { __ABBY_PROJECT_DATA__, ...pageProps } }) {
  return (
    <AbbyProvider initialData={__ABBY_PROJECT_DATA__}>
      <Component {...pageProps} />
    </AbbyProvider>
  );
}
 
export default withAbby(MyApp);

If you only want client side rendering, you can skip the withAbby part and just wrap your app with the AbbyProvider (and omit initialData).

Usage

Hooks

Feature Flags

// index.tsx
 
import { useFeatureFlag } from "lib/abby";
 
export function HomePage() {
  const useDarkmode = useFeatureFlag("useDarkmode");
 
  return (
    <>
      <h1>My Homepage</h1>
      {useDarkmode && <p>Darkmode is enabled</p>}
    </>
  );
}

You can now go to the Abby dashboard and enable the useDarkmode flag for your project. You will see the text "Darkmode is enabled" on your homepage.

Remote Configuration

// index.tsx
 
import { useRemoteConfig } from "lib/abby";
 
export function HomePage() {
  const customButtonText = useRemoteConfig("customButtonText");
 
  return (
    <>
      <h1>My Homepage</h1>
      <button>{customButtonText}</button>
    </>
  );
}

You can now control the text, which the button is displaying, on the Abby dashboard.

A/B Tests

// index.tsx
export function HomePage() {
  const { variant, onAct } = useAbby("theme");
 
  return (
    <>
      <h1>My Homepage</h1>
      <button
        onClick={() => {
          onAct();
          // React to the user clicking the button
        }}
        className={`button ${variant === "dark" && "bg-dark"} ${variant === "light" && "bg-light"}`}
      >
        BUY IT
      </button>
    </>
  );
}

This is a simple example of an A/B Test. Once you loaded the page you will get either the "light" or the "dark" variant of the button.

Non-React Context

You might want to use Abby outside of React. For example in your app's middleware or in a Next.js API route.

Edge Functions

Edge Functions (opens in a new tab) are Vercel's globally distributed serverless functions. They are a great way to run code on the edge of the Vercel network and use a leaner runtime with less functionality. Abby works perfectly with Edge Functions.

The best usecase with Edge Functions and Abby is to use them in your middleware, for example to redirect users to a beta version of your app.

// middleware.ts
import { withAbbyEdge } from "lib/abby";
import { NextResponse } from "next/server";
 
export default withAbbyEdge((req) => {
  const myFlag = getFeatureFlagValue("test-flag");
 
  // make sure to use the req object here
  const [currentVariant, setCookie] = getABTestValue("test-abtest", req);
 
  if (myFlag && currentVariant === "beta-user") {
    const res = NextResponse.redirect("/beta");
 
    // update the user's cookie
    setCookie(res);
    return res;
  }
 
  return NextResponse.next();
});

API Routes

You can access feature flags and A/B tests in your API routes as well.

// /api/test.ts
import { withAbbyApiHandler } from "lib/abby";
 
export default withAbbyApiHandler((req, res) => {
  const myFlag = getFeatureFlagValue("test-flag");
 
  // make sure to use the req object here
  const [currentVariant, setCookie] = getABTestValue("test-abtest", req);
 
  if (myFlag && currentVariant === "beta-user") {
    // update the user's cookie
    setCookie(res);
    return res.status(200).end();
  }
 
  res.status(404).end();
});

CLI Devtools