Next.js

Our Next.js integration works with Next.js 12 or later. It uses the React SDK under the hood and just has some additional features for Next.js.

Installation

To get started make sure to install the package using your favorite package manager.

npm i @tryabby/next

Create your config

To use Abby you need to create your config first. You can do this by creating a file called abby.config.ts in your root folder. This file will be used to configure your project.

// abby.config.ts
import { defineConfig } from "@tryabby/next";
 
export default defineConfig({
  projectId: "<YOUR_PROJECT_ID>",
  currentEnvironment: process.env.NODE_ENV,
  environments: ["production", "development"],
  tests: {
    test: { variants: ["A", "B"] },
    footer: { variants: ["dark", "orange", "green"] },
    // ... your tests
  },
  flags: ["darkMode", "newFeature"],
  remoteConfig: {
    customButtonText: "String",
  },
});

Create your Instance

To use Abby in your code you will need to create a typed Hook and Provider first. You can do this by using the createAbby function. Please copy the id of your project from the dashboard to get started.

import { createAbby } from "@tryabby/next";
import abbyConfig from "../abby.config";
 
const { AbbyProvider, useAbby, withAbby } = createAbby(abbyConfig);

Wrap your Application

You will need to wrap your application with the AbbyProvider to make sure the hook works. This is done in the _app.tsx / _app.js file in your Next.js project.

import { AbbyProvider } from "../lib/abby";
 
function MyApp({ Component, pageProps }) {
  return (
    <AbbyProvider>
      <Component {...pageProps} />
    </AbbyProvider>
  );
}
 
export default MyApp;

By default the AbbyProvider will fetch the data from the server on the first render (client side). This can be improved by using the initialData prop. This will make sure the data is already available on the first render This works really well with Static Site Generation (SSG) and Server Side Rendering (SSR).

import { AbbyProvider, withAbby } from "../lib/abby";
 
function MyApp({ Component, pageProps: { __ABBY_PROJECT_DATA__, ...pageProps } }) {
  return (
    <AbbyProvider initialData={__ABBY_PROJECT_DATA__}>
      <Component {...pageProps} />
    </AbbyProvider>
  );
}
 
export default withAbby(MyApp);

Usage

For the hook usage please read the React SDK documentation.