By Mehdi HassanHow do you run A/B tests on Framer, Webflow or Next.js?
You run A/B tests on these platforms by using the method each one was designed for: native testing in Framer, the Optimize add-on in Webflow, and server-side variant assignment in Next.js. The steps around the tool are the same everywhere: a written hypothesis, a tracked conversion, a QA pass and a fixed end date.
We build marketing sites on all three, and the failures we see are rarely the tool's fault. They come from tracking that wasn't set up, variants that break on mobile, or tests stopped the day a winner appears. For the strategy side (what to test and how to read it), start with our guide to A/B testing landing pages. This article is the setup manual.
Platform | Native method | Who builds variants | Flicker | Main watch-out |
|---|---|---|---|---|
Framer | Built-in A/B testing on paid plans | Designer or marketer in the editor | None | Reporting is basic; judge deeper goals elsewhere |
Webflow | Webflow Optimize add-on | Marketer in Webflow | Minimal | Priced as an add-on; check volume first |
Next.js | Middleware plus cookie, server render | Developer | None | Caching must vary by variant |
How does AB testing in Framer work?
AB testing in Framer works inside the editor: you create a variant of a page, choose how traffic is split, pick a goal, and publish. Framer serves the variants itself, so there's no third-party script and no flash of the original page.
Check your plan
Framer's A/B testing and analytics sit on paid site plans. Confirm what your current plan includes on Framer's pricing page, since features move between tiers.
Duplicate the page as a variant
Make the change you're testing on the variant only. Keep it to one idea, such as a new headline and subheadline, so the result means something.
Set the goal
Pick the click or form submission that counts as a conversion. If your real goal is a booked demo in another tool, also track it there, because Framer only sees what happens on the site.
Split traffic and publish
A 50/50 split finishes fastest. Publish, then open both versions in a private window on a phone and submit the form on each.
Wait for the planned sample
Note the end date in your calendar the day you launch. Don't read the result until then.
Framer's native testing is the right default for most Framer sites. Its limit is that results live in Framer, so if you judge success on pipeline or trial-to-paid, pass the variant into your CRM or analytics too.
How do you set up Webflow A/B testing?
Webflow A/B testing is done with Webflow Optimize, Webflow's testing and personalization add-on. You choose a page, build variants in a visual editor, set a goal and let Optimize split traffic.
- Confirm Optimize is available on your workspace and what it costs at your traffic level.
- Choose a page with enough traffic. Run the numbers in our A/B test sample size guide first.
- Build the variant in Optimize, changing one idea at a time.
- Set the goal to a form submission or a click on the primary call to action.
- QA on mobile and desktop, including the form's success state, then launch.
If Optimize isn't worth it for your volume, a third-party client-side tool works on Webflow too. You'll trade some speed and accept flicker risk. Our A/B testing tools review covers which ones fit.
How do you A/B test in Next.js without flicker?
In Next.js, you avoid flicker by deciding the variant on the server or at the edge, before the page renders. Middleware reads a cookie, assigns a variant if none exists, and rewrites the request to the right version.
Create both versions
Either two routes (for example, a control and a variant path that users never see in the URL) or one page that reads a variant prop.
Assign in middleware
Middleware checks for a variant cookie. If it's missing, it picks one at random, sets the cookie, and rewrites to the matching route. Returning visitors keep their variant.
Keep caching honest
If pages are statically generated or cached at the CDN, make sure the cache key includes the variant, or everyone gets whichever version was cached first.
Send the variant to analytics
Push the variant name into the dataLayer or your analytics as an event parameter on page view and on conversion.
Or use a flags tool
PostHog experiments or a flags SDK on Vercel handle assignment and analysis for you, while still running server-side. The middleware docs on nextjs.org explain the request lifecycle.
Why redirects make worse tests than rewrites
A redirect sends the visitor to a different URL, which adds a round trip, changes the address bar and can confuse analytics with a second page view. A rewrite serves different content at the same URL with no extra request.
If you do run a split URL test with redirects, use a temporary 302 redirect and a canonical tag pointing to the original page, which is what Google's guidance on testing recommends. For most landing page tests in Next.js, a rewrite is cleaner.
How do you track conversions in an A/B test?
Track conversions by recording one key event for the goal and attaching the variant name to it, before the test starts. Without the variant on the event, you can't split results, and without a pre-agreed goal, people pick whichever metric looks best afterward.
In GA4, that means a key event such as a form submission, with a parameter or user property holding the variant. On Framer and Webflow, native testing records its own goal, but mirroring it in GA4 lets you check numbers in one place. For deeper goals like demos held or trials activated, pass the variant through to your CRM with a hidden form field.
What should you QA before launching a variant?
QA every variant as if it were a new page launch, because to half your visitors it is. Most broken tests we've seen failed on mobile layout, a form that didn't submit, or a tracking tag that only fired on the control.
- Open each variant on a real phone and a desktop browser in private mode.
- Submit the form on each variant and confirm the lead arrives and the event fires.
- Check page speed on both. A heavier variant can lose because it's slower, not because its message is worse.
- Confirm a returning visitor sees the same variant on the second visit.
- Write down the hypothesis, the goal and the end date where the team can see it. Our A/B test hypothesis template gives you the format.
Which platform is easiest for A/B testing?
Framer is the easiest platform for A/B testing because testing is built in and needs no developer. Webflow is close behind if Optimize fits your budget. Next.js gives the most control and the cleanest data, but each variant costs developer time.
If you're choosing a platform partly for testing, weigh it against everything else the site needs. Our comparison of Webflow vs Framer vs Next.js total cost puts testing next to hosting, CMS and maintenance. Whatever you pick, the bigger lever is what you test, not how; start with a backlog of A/B test ideas ranked by likely impact.
