# 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.

## Setup

Install location: app/layout.tsx or pages/_document.tsx

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

```html
<!-- Otter -->
<style id="optimo-hide">body{opacity:0 !important}</style>
<script src="https://www.otterab.com/sdk/optimo.js"
  key="YOUR_API_KEY" async></script>
```

## What teams test on Next.js

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

## Frequently asked 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.

---

Canonical page: https://www.otterab.com/ab-testing/nextjs