# A/B Testing Solution for Next.js

**URL:** <https://community.prismic.io/t/a-b-testing-solution-for-next-js/14724>\
**Category:** Developing with Prismic\
**Tags:** nextjs\
**Created:** [December 11, 2023, 12:48pm UTC](https://community.prismic.io/t/a-b-testing-solution-for-next-js/14724 "2023-12-11T12:48:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 11, 2023, 12:48pm UTC](https://community.prismic.io/t/a-b-testing-solution-for-next-js/14724/1 "2023-12-11T12:48:54Z")

</div>

Hi,

Our site, built using Next.js, is currently undergoing redesign for the upcoming year. My team and I are actively seeking a solution to facilitate A/B testing through Prismic.

We have encountered challenges in finding a suitable provider that can integrate with Prismic. Our goal is to A/B test various site variations, allowing us to make informed decisions before the official release.

Could you please provide guidance on how Prismic supports A/B testing, or recomment any compatible providers that can seamlessly integrate with our Next.js site?

Thank you for your assistance.

---

<div class="post-metadata">

**Author:** ![alexandre.chamla](https://avatars.discourse-cdn.com/v4/letter/a/c89c15/32.png) [@alexandre.chamla](https://community.prismic.io/u/alexandre.chamla)\
**Post date:** [December 20, 2023, 12:07pm UTC](https://community.prismic.io/t/a-b-testing-solution-for-next-js/14724/3 "2023-12-20T12:07:49Z")

</div>

Hi there,

Alex from Prismic Solution Engineering team.

We've been looking for such a tool that would allow us to handle all the content inside Prismic and avoid going into another tool to create test content.

In Prismic we added an "A/B testing" tab in our page type, that contains

- a content relationship allowing you to specify the variant page you want to test your page against
- a boolean "is default page" that allows you to specify if that page is a default page or a variant

This way when you want to test a Page A, you can simply:

1. duplicate the page A and mark the duplicate as a variant ("is default page" to false)
2. do your edits in the variant
3. add the variant in the "A/B testing" tab of your page A  
That's it from Prismic side.

That means the we need an API-driven tool that can connect to your analytics tool.  
For our demo website we used [https://www.growthbook.io](https://www.growthbook.io). see Next.js guide [here](https://docs.growthbook.io/guide/nextjs-and-growthbook)

This method offers the benefit of allowing you to perform server-side A/B testing which will preserve performance and remove any flicker which arises with client-side A/B testing.

Going one step further you can even statically build the variants of your page in advance and then redirect users on the Edge depending on their bucket using for example Edge Middleware [How to run A/B tests with Next.js and Vercel – Vercel](https://vercel.com/blog/ab-testing-with-nextjs-and-vercel)

---

<div class="post-metadata">

**Author:** ![alban](https://avatars.discourse-cdn.com/v4/letter/a/858c86/32.png) [@alban](https://community.prismic.io/u/alban)\
**Post date:** [January 10, 2025, 10:42am UTC](https://community.prismic.io/t/a-b-testing-solution-for-next-js/14724/4 "2025-01-10T10:42:53Z")

</div>

Hello Alexandre !

I'm very interested in this type of “A/B test” page but I can't find it in my Prismic space.

Does the functionality still exist? If so, is there any documentation on it? If not, do you have a trusted alternative way to achieve the same result without growing the stack?

---

<div class="post-metadata">

**Author:** ![Ezekiel](https://avatars.discourse-cdn.com/v4/letter/e/848f3c/32.png) [@Ezekiel](https://community.prismic.io/u/Ezekiel)\
**Post date:** [January 16, 2025, 1:12pm UTC](https://community.prismic.io/t/a-b-testing-solution-for-next-js/14724/9 "2025-01-16T13:12:31Z")

</div>

Hi @alban,

This isn't something we offer as a functionality, rather a "home-made" alternative using Prismic. The solution Alexandre offered in his post described the steps we took, and you can reproduce that on your own project if you'd like.

Tabs can be used in Custom Types to organize your fields. You can create them in any Page/Custom Type in your Slice Machine here:

 ![Screenshot 2025-01-14 at 16.24.16](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/3/3e6f9f43511be6fe32dd368396dd4df5d0e80b01.png)

They'll give you the chance to for example add fields in the static zone: this is where you'd put the content relationship Alexandre mentioned. It will keep this A/B testing tool off the Main page where your content is and give your Custom Type some structure. You can create as many as you'd like, and organize it however you wish, it won't impact the structure of the API response. If you'd like to know more, you can check out this post:

> [@Best practices for custom type tabs?](https://community.prismic.io/t/best-practices-for-custom-type-tabs/7969):
>
> Hello! I'm new to Prismic and am looking for best practices on custom type tabs, for the use case of a marketing site. I understand that tabs can help organize the editor experience. I've seen all content live in the "Main" tab. I've also seen content split out (ex: a "Hero" tab, a "Sidebar" tab). I've also seen an "SEO" tab for setting metadata. Can anyone share best practices, considerations, and/or heuristics for when something should be in its own tab vs. in the "Main" tab? What are obvious…

Because this is just one way to do it, there's no documentation on our version of A/B testing aside from the growthbook one shared above, but if you try it yourself and you have questions, feel free to ask them on the forum and we can take a look 🙂
