API Reference (Next.js)

createAbby

Parameters

The createAbby function takes an object as a parameter. The object can contain the following properties:

tests

The tests property is an object containing your defined A/B Tests. You probably want to use the Copy Button in your dashboard to copy the tests object. They keys of the object represent the names of your predefined A/B tests. The values are objects containing the following properties:

Example

const abby = createAbby({
  // ... your config
  tests: {
    "test-abtest": {
      variants: ["control", "variant-a", "variant-b"],
    },
  },
});

flags

The flags property is an array containing your defined Feature Flags. You probably want to use the Copy Button in your dashboard to copy the flags array.

Example

const abby = createAbby({
  // ... your config
  flags: ["test-flag"],
});

settings

The settings property is an object containing additional settings for Abby. The following properties are available:

• flags.defaultValue: Allows you to set a general default boolean value for each Feature Flag type.

  flags: {
    defaultValue: false,
  },

• flags.devOverrides: An object containing the values of feature flags in development mode. The keys of the object represent the names of the flags.

• remoteConfig.defaultValue: Allows you to set default values for the possible Remote Config types.

  remoteConfig: {
    defaultValues: {
      String: "",
      Number: 0,
      JSON: {},
    },
  },

• remoteConfig.devOverrides: An object containing the values of Remote Configuration variables in development mode. The keys of the object represent the names of the flags. The value must be assignable to the type of the variable.

Return Values

useAbby

useAbby is a react hook that used to access the value of an A/B Test. Recurring users will always get the same value for a test. New users will get a random value for a test depending on the defined weights

Parameters

• name: The name of the test or flag, needs to be one of the defined tests.
• lookupObject: An optional lookup object to automatically map the active variant to a custom value.

Return Values

• variant : The variant of the test or the looked up value if you provided a lookupObject

• onAct: A function to call when the user performs an action associated with the test Type: function

useFeatureFlag

useFeatureFlag is a react hook that used to access the value of a Feature Flag.

Parameters

The name of the flag, needs to be one of the defined flags.

Return Value

The value of the flag Type: boolean

useRemoteConfig

useRemotConfig is a React hook that is used to access the value of a Remote Configuration variable.

Parameters

The name of the Remote Configuration variable, which needs to be one of the keys in your remoteConfig object in your abby.config.ts.

Return Value

The current value of the Remote Configuration variable. The type will be according to the specified type in the abby.config.ts

AbbyProvider

A react component to wrap your application.

Props

• children: The children of the component
• initialData (optional): The data (weights, tests, etc). If not provided, the data will be fetched on the client.

getFeatureFlagValue

getFeatureFlagValue is a function to access the value of a feature flag. This can be called in a non-react scope (Regular Typescript, Edge Functions and API Routes)

Parameters

The name of the test or flag, needs to be one of the defined flags.

Return Value

The value of the flag Type: boolean

getRemoteConfig

getRemoteConfig is a function to access the value of a Remote Configuration variable. This can be called in a non-react scope (Regular Typescript, Edge Functions and API Routes)

Parameters

The name of the Remote Configuration variable, which needs to be one of the keys in your remoteConfig object in your abby.config.ts.

Return Value

The current value of the Remote Configuration variable. The type will be according to the specified type in the abby.config.ts

getABTestValue

getABTestValue is a function to access the users variant of an A/B Test. This can be called in a non-react scope. If the user is new, a random variant will be generated based on the weights, persisted in a cookie and returned. Otherwise the variant will be read from the cookie and returned.

Parameters

• testName: The name of the test, needs to be one of the defined tests.
• lookupObject: An optional lookup object to automatically map the active variant to a custom value.

Return Values

The variant of the test or the looked up value if you provided a lookupObject

__abby__

__abby__ is the Abby instance. It can be used to access the data of the current user. In most cases you will not need to use this.

withDevtools

withDevtools is a higher order function to wrap the Devtools from @tryabby/devtools for usage within Reacts.

Parameters

The Devtools component from @tryabby/devtools

Example

import { AbbyDevTools } from "@tryabby/devtools";
export const AbbyDevtools = withDevtools(AbbyDevTools);

withAbby

A higher-order component that enables Server Side Rendering within Next.js. If you wrap your _app component with this, all occurances of useFeatureFlag will be SSR'd

Example

// _app.tsx (or _app.js)
import { withAbby } from "lib/abby";
 
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
 
export default withAbby(MyApp);

withAbbyEdge

A higher-order function that can be wrapped around any vercel edge function (like the middleware.ts). It will preload the data for the current user and pass it to the edge function.

Parameters

Your edge function

Example

// 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();
});

withAbbyApiHandler

A higher-order function that can be wrapped around any api route. It will preload the data for the current user and pass it to the edge function.

Parameters

Your api route handler

Example

// /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();
});

getABResetFunction

This is a function which returns a function that can be used to reset the stored variant for the current user. This means the cookie will be deleted and the user will get a new variant on the next page load.

Parameters

The name of the test, needs to be one of the defined tests.

Example

import { getABResetFunction } from "lib/abby";
import { useRouter } from "next/router";
 
export default function SomePage() {
  const router = useRouter();
 
  const onReset = () => {
    const resetCookie = getABResetFunction("SignupButton");
    resetCookie();
    router.reload();
  };
 
  return (
    <div>
      <h1>Hello World</h1>
      <button onClick={onReset}>Reset Cookie</button>
    </div>
  );
}