{"id":28458182,"url":"https://github.com/9d8dev/ab","last_synced_at":"2025-07-02T05:31:45.373Z","repository":{"id":181873407,"uuid":"667591876","full_name":"9d8dev/ab","owner":"9d8dev","description":"A/B Testing on the Edge with NextJS, Vercel, and Statsig","archived":false,"fork":false,"pushed_at":"2023-07-26T16:19:08.000Z","size":106,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-01T02:49:38.352Z","etag":null,"topics":["ab-testing","app-router-nextjs","nextjs","nextjs13","statsig","vercel"],"latest_commit_sha":null,"homepage":"https://statsig-ab-testing.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/9d8dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-17T21:36:34.000Z","updated_at":"2024-11-10T02:06:44.000Z","dependencies_parsed_at":"2024-12-29T05:02:14.459Z","dependency_job_id":"603ec4ad-6009-43b3-82d0-f951733e0685","html_url":"https://github.com/9d8dev/ab","commit_stats":null,"previous_names":["9d8dev/ab-testing-statsig-app-router-template","9d8dev/ab"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/9d8dev/ab","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9d8dev%2Fab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9d8dev%2Fab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9d8dev%2Fab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9d8dev%2Fab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/9d8dev","download_url":"https://codeload.github.com/9d8dev/ab/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9d8dev%2Fab/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263081396,"owners_count":23410875,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ab-testing","app-router-nextjs","nextjs","nextjs13","statsig","vercel"],"created_at":"2025-06-07T00:10:07.864Z","updated_at":"2025-07-02T05:31:45.349Z","avatar_url":"https://github.com/9d8dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A/B Testing \u0026 Experimentation with Statsig, NextJS, and Vercel\n\n\u003cimg width=\"1520\" alt=\"Screenshot 2023-07-26 at 10 18 14 AM\" src=\"https://github.com/9d8dev/ab-testing-statsig-app-router-template/assets/95453018/d27dbbfe-5eef-4d58-8244-efdc43c249cc\"\u003e\n\nThis example shows how to do experimentation using Statsig, leveraging Edge Config and Edge Middleware. This example is an updated version of [Vercel's Statsig example](https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-statsig). It has been updated to use the NextJS 13 [App Router](https://nextjs.org/docs/app).\n\n## Overview\n\nThe `ab-testing-statsig-app-router-template` is a simple and efficient way to get started with A/B testing on the Edge with Vercel and NextJS. It is developed and maintained by [Ampry](https://github.com/orgs/ampry) and [9d8](https://github.com/orgs/9d8dev). Built by [Cameron Youngblood](https://github.com/youngbloodcyb) and [Bridger Tower](https://github.com/brijr).\n\n## Demo\n\n[statsig-ab-testing.vercel.app](https://statsig-ab-testing.vercel.app/)\n\nClick the `Reset Cookie` button to refresh the cookie and re-bucket you into a new experiment group.\n\n## How to Use\n\nYou can choose from one of the following two methods to use this repository:\n\n**One-Click Deploy using Vercel:**\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2F9d8dev%2Fab-testing-statsig-app-router-template\u0026env=EDGE_CONFIG,EDGE_CONFIG_ITEM_KEY,STATSIG_SERVER_API_KEY,STATSIG_CONSOLE_API_KEY,NEXT_PUBLIC_STATSIG_CLIENT_KEY\u0026project-name=ab-testing\u0026repository-name=ab-testing)\n\n### or\n\n**Clone this Repository**\n\n```bash\ngit clone https://github.com/9d8dev/ab-testing-statsig-app-router-template.git\n\ncd ab-testing-statsig-app-router-template\n\nnpm install\n\nnpm run dev\n```\n\n### Setting up environment variables\n\nLogin to the [Statsig console](https://console.statsig.com/) and enable the pro plan to access experimentation features.\n\nNavigate to `Settings` -\u003e `Keys and Environments`. Add all three API keys (client, server, and console) to your `env` file respectively.\n\nInstall the [Statsig Vercel Integration](https://vercel.com/integrations/statsig) for your project. It will give you the Edge Config Connection String and Edge Config Item Key. Place these in your `env` file respectively.\n\n## Creating an Experiment\n\nTo create an experiment, sign in to Statsig and navigate to `Experiments` in the sidebar menu. Create a new experiment and name it whatever you like. Enter additional optional information. At the end of the form, select `User ID` for the ID Type.\n\nWithin your NextJS project, open `/lib/constants.ts`. Copy the experiment name from Statsig and paste it as the value for the `EXPERIMENT` constant.\n\n![example](https://github.com/9d8dev/ab-testing-statsig-app-router-template/assets/95453018/cacf446e-af47-419c-8024-79dfa797d301)\n\nEXAMPLE:\n\n```\nexport const EXPERIMENT = nextjs_test;\n```\n\nAdd a parameter to your experiment called `bucket`.\nName your buckets. In this case, make sure that your `control` bucket is left blank. It doesn't matter what your name your variation, this page will be statically generated at build time. _See image below for example._\n\n\u003cimg width=\"1490\" alt=\"Screenshot 2023-07-26 at 9 12 24 AM\" src=\"https://github.com/9d8dev/ab-testing-statsig-app-router-template/assets/95453018/86c401be-17c9-4c66-ac16-af59a9f48783\"\u003e\n\nWhen you have completed your configuration, you can start the experiment.\n\n## Making Changes to Variations\n\nIn this example, the `app/[bucket]/page.js` file is the variation page whereas the root `app/page.js` file is the control page. In other words, the root page is your original page while the bucket page contains the changes you want to test. With the configuration in this project, traffic will be split between these two pages. Make any changes to your page in the `app/[bucket]/page.js` file.\n\n## Statsig Events and Metrics\n\nWhile this example does not yet support metrics, [Statsig has a client-side React library](https://docs.statsig.com/client/reactSDK) for easily managing metrics and custom events. This allows you to send custom client events from pages that are wrapped in the Statsig provider.\n\n## Middleware\n\nThis example utilizes middleware to direct traffic to the proper variation. See `middleware.ts` for more details.\n\n## Contributions\n\nThis project is open for contributions. We look forward to seeing your ideas and improvements.\n\n## License\n\nThis project is licensed under the MIT License. See the LICENSE file in the repository root for more information.\n\n## Contact\n\nFor more information, check out the creators at [Cameron Youngblood](https://github.com/youngbloodcyb) and [Bridger Tower](https://github.com/brijr).\nMade by [9d8](https://9d8.dev) and [Ampry](https://ampry.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9d8dev%2Fab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F9d8dev%2Fab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9d8dev%2Fab/lists"}