Next.js A/B testing

Next.js A/B testing that respects client-side navigation

Load Otter once in the root layout, then let the SDK re-evaluate experiments as App Router or Pages Router navigation changes the URL.

Start a free test See how Otter works

Install location

app/layout.tsx or pages/_document.tsx

One shared installation powers every experiment, conversion goal, and report on this site.

  1. 1Add the Otter SDK with the Next.js Script component.
  2. 2Place the anti-flicker style in the shared document head.
  3. 3Verify the deployment and create URL rules for the routes under test.

What to test on Next.js

App Router pages
Pages Router sites
SPA route experiments
Custom React event goals

Next.js A/B testing questions

Does Otter work with the Next.js App Router?

Yes. Install the Script component in app/layout.tsx and Otter will detect client-side history changes.

Can I track React interactions as goals?

Yes. Call optimo.track from your event handler, or configure click goals directly in Otter.

Does Otter require a server-side Next.js SDK?

No. Website experiments use the lightweight browser SDK; split URL tests can still route visitors to server-rendered variants.