init repo

Author: cstrnt

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_ABBY_PROJECT_ID=<YOUR ABBY PROJECT ID>

.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# Testing
+/coverage
+
+# Next.js
+/.next/
+/out/
+
+# Production
+/build
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Local ENV files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Vercel
+.vercel
+
+# Turborepo
+.turbo
+
+# typescript
+*.tsbuildinfo

.npmrc

@@ -0,0 +1,2 @@
+# Enabled to avoid deps failing to use next@canary
+legacy-peer-deps=true

README.md

@@ -0,0 +1,66 @@
+---
+name: A/B Testing with A/BBY
+slug: ab-testing-abby
+description: A/BBY is a service for developer focused Feature Flags & A/B Testing. In this template you'll be able to use feature flags and A/B tests at the edge.
+framework: Next.js
+useCase: Edge Middleware
+css: Tailwind
+deployUrl: https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-abby&env=NEXT_PUBLIC_ABBY_PROJECT_ID&project-name=abby-demo&repository-name=ab-testing-abby
+demoUrl: https://abby-nextjs-example.vercel.app/
+relatedTemplates:
+  - ab-testing-simple
+---
+
+# A/B Testing with ConfigCat
+
+[A/BBY](https://tryabby.dev) is a service for developer focused Feature Flags & A/B Testing. In this Demo you'll be able to use feature flags and A/B tests at the edge.
+
+By A/B testing directly on the server-side, you'll reduce layout shift from client-loaded experiments and improving your site's performance with smaller JavaScript bundles.
+
+## Demo
+
+https://abby-nextjs-example.vercel.app/
+
+## How to Use
+
+You can choose from one of the following two methods to use this repository:
+
+### One-Click Deploy
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-abby&env=NEXT_PUBLIC_ABBY_PROJECT_ID&project-name=abby-demo&repository-name=ab-testing-abby)
+
+### Clone and Deploy
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [pnpm](https://pnpm.io/installation) to bootstrap the example:
+
+```bash
+pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-abby ab-testing-abby
+```
+
+You'll need to have a free [A/BBY](https://tryabby.dev/login) account. Once that's done, copy the `.env.example` file in this directory to `.env.local` (which will be ignored by Git):
+
+```bash
+cp .env.example .env.local
+```
+
+Then open `.env.local` and set the `NEXT_PUBLIC_ABBY_PROJECT_ID` environment variable to your project's id. Your can copy your project's ID by clicking the Code button on the top right of your dashboard and selecting _Copy Project ID_.
+
+The demo uses needs the following to be set in your A/BBY project:
+
+- 1 Environment called _default_
+- 2 Feature Flags (_serverFlag_ and _clientFlag_)
+- 2 A/B Tests (_Home_ and _Marketing_)
+
+Next, run Next.js in development mode:
+
+```bash
+pnpm dev
+```
+
+The `middleware.ts` file is used for the `/marketing` and `home/` routes. The user will see the page for his variant.
+
+The index page ([pages/index.tsx](pages/index.tsx)) also shows how to do AB testing under the same path, in SSR and client-side.
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=edge-middleware-eap) ([Documentation](https://nextjs.org/docs/deployment)).

lib/ab-testing.ts

@@ -0,0 +1,19 @@
+import { createAbby } from "@tryabby/next";
+
+if (typeof process.env.NEXT_PUBLIC_ABBY_PROJECT_ID != "string") {
+  throw new Error("NEXT_PUBLIC_ABBY_PROJECT_ID is not defined");
+}
+
+export const abby = createAbby({
+  projectId: process.env.NEXT_PUBLIC_ABBY_PROJECT_ID,
+  currentEnvironment: "default",
+  tests: {
+    Home: {
+      variants: ["A", "B", "C"],
+    },
+    Marketing: {
+      variants: ["b", "c", "original"],
+    },
+  },
+  flags: ["clientFlag", "serverFlag"],
+});

middleware.ts

@@ -0,0 +1,27 @@
+import { NextResponse } from "next/server";
+import { abby } from "@lib/ab-testing";
+
+export const config = {
+  matcher: ["/home", "/marketing"],
+};
+
+export default abby.withAbbyEdge((req) => {
+  const { pathname } = req.nextUrl;
+  if (pathname === "/home") {
+    const [bucket, setCookie] = abby.getABTestValue("Home", req);
+    const url = req.nextUrl.clone();
+    url.pathname = `/home/${bucket}`;
+    const res = NextResponse.rewrite(url);
+    setCookie(res);
+    return res;
+  }
+
+  if (pathname === "/marketing") {
+    const [bucket, setCookie] = abby.getABTestValue("Marketing", req);
+    const url = req.nextUrl.clone();
+    url.pathname = `/marketing/${bucket}`;
+    const res = NextResponse.rewrite(url);
+    setCookie(res);
+    return res;
+  }
+});

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "ab-testing-abby",
+  "repository": "https://github.com/vercel/examples.git",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@tryabby/next": "^3.0.1",
+    "@vercel/examples-ui": "^1.0.5",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.45",
+    "@types/react": "^18.0.28",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.36.0",
+    "eslint-config-next": "latest",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
+    "turbo": "^1.8.5",
+    "typescript": "^4.9.5"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,24 @@
+import type { AppProps } from 'next/app'
+import type { LayoutProps } from '@vercel/examples-ui/layout'
+import { getLayout } from '@vercel/examples-ui'
+import { abby } from '@lib/ab-testing'
+import '@vercel/examples-ui/globals.css'
+import { ABBY_DATA_KEY } from '@tryabby/next'
+
+function MyApp({ Component, pageProps: { [ABBY_DATA_KEY]: abbyData, ...pageProps } }: AppProps) {
+  const Layout = getLayout<LayoutProps>(Component)
+
+  return (
+    <abby.AbbyProvider initialData={abbyData}>
+      <Layout
+        title="AB Testing with A/BBY"
+        path="edge-middleware/abby-ab-testing"
+      >
+        <Component {...pageProps} />
+      </Layout>
+    </abby.AbbyProvider>
+  )
+}
+
+
+export default abby.withAbby(MyApp)

pages/home/[variant].tsx

@@ -0,0 +1,48 @@
+import { abby } from "@lib/ab-testing";
+import { Button, Layout, Page, Text } from "@vercel/examples-ui";
+import { useRouter } from "next/router";
+
+export default function Home() {
+  const router = useRouter();
+
+  const resetStoredVariant = () => {
+    const resetVariant = abby.getABResetFunction("Home");
+    resetVariant();
+    router.reload();
+  };
+  const variant = (router.query.variant ?? "") as string;
+
+  return (
+    <Page>
+      <Text variant="h2" className="mb-6">
+        Home page variant
+      </Text>
+      <Text className="text-lg mb-4">
+        You&apos;re currently on <b>variant {variant.toUpperCase()}</b>
+      </Text>
+      <Button variant="black" onClick={resetStoredVariant}>
+        Remove bucket
+      </Button>
+    </Page>
+  );
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: abby.getVariants("Home").map(variant => {
+      return {
+        params: {
+          variant,
+        },
+      };
+    }),
+    fallback: false,
+  }
+}
+
+export async function getStaticProps() {
+  // Here you would return data about the bucket
+  return { props: {} }
+}
+
+Home.Layout = Layout;

pages/index.tsx

@@ -0,0 +1,47 @@
+import { abby } from "@lib/ab-testing";
+import { Layout, Page, Text, Link, List } from "@vercel/examples-ui";
+import { GetStaticPropsResult, InferGetStaticPropsType } from "next";
+
+type Props = InferGetStaticPropsType<typeof getStaticProps>;
+export default function Index({ myServerFlag }: Props) {
+  const clientFlag = abby.useFeatureFlag("clientFlag");
+  return (
+    <Page>
+      <Text variant="h1" className="mb-6">
+        AB testing with buckets
+      </Text>
+      <Text className="mb-4">
+        In this demo we use cookies to assign a bucket with the variant to show.
+        Visit one of the pages below and a bucket will be assigned to you.
+      </Text>
+      <List>
+        <li>
+          <Link href="/home">/home</Link>
+        </li>
+        <li>
+          <Link href="/marketing">/marketing</Link>
+        </li>
+      </List>
+
+      {clientFlag && (
+        <Text className="mt-4">
+          If you see this text the <b>client</b> flag is enabled
+        </Text>
+      )}
+      {myServerFlag && (
+        <Text className="mt-4">
+          If you see this text the <b>server side</b> flag is enabled
+        </Text>
+      )}
+    </Page>
+  );
+}
+
+export const getStaticProps = () => {
+  const myServerFlag = abby.getFeatureFlagValue("serverFlag");
+  return {
+    props: { myServerFlag },
+  } satisfies GetStaticPropsResult<{}>;
+};
+
+Index.Layout = Layout;

pages/marketing/[variant].tsx

@@ -0,0 +1,50 @@
+import { abby } from "@lib/ab-testing";
+import { Button, Layout, Page, Text } from "@vercel/examples-ui";
+import { useRouter } from "next/router";
+
+export default function Marketing() {
+  const router = useRouter();
+
+  const resetStoredVariant = () => {
+    const resetVariant = abby.getABResetFunction("Marketing");
+    resetVariant();
+    router.reload();
+  };
+  const variant = (router.query.variant ?? "") as string;
+
+  return (
+    <Page>
+      <Text variant="h2" className="mb-6">
+        Marketing page variant
+      </Text>
+      <Text className="text-lg mb-4">
+        You&apos;re currently on <b>variant {variant.toUpperCase()}</b>
+      </Text>
+
+      <Button type="button" variant="black" onClick={resetStoredVariant}>
+        Reset Variant
+      </Button>
+    </Page>
+  );
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: abby.getVariants("Marketing").filter(v => v !== "original").map(variant => {
+      return {
+        params: {
+          variant,
+        },
+      };
+    }),
+    fallback: false,
+  }
+}
+
+
+export async function getStaticProps() {
+  // Here you would return data about the bucket
+  return { props: {} }
+}
+
+Marketing.Layout = Layout;