A/B Testing Solution for Next.js


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.

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. see Next.js guide here

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

1 Like