How would you implement A/B testing using Next.js middleware and routing?

Question

Accepted Answer

A/B testing in Next.js using middleware and routing allows you to serve different page variants to users at the edge, without rebuilding your application or causing visible URL changes. The core pattern involves intercepting requests in middleware, assigning users to experiment variants (either randomly or deterministically), storing that assignment in a cookie for consistency, and using `NextResponse.rewrite()` to serve content from variant-specific routes while preserving the original URL in the browser. This approach ensures users have a consistent experience across sessions and allows you to measure conversion differences between variants . ```tsx
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Only run experiment on homepage
  if (request.nextUrl.pathname === '/') {
    // Check if user already has a variant assignment
    const variantCookie = request.cookies.get('ab-variant');
    let variant = variantCookie?.value;

// If no cookie exists, assign randomly
    if (!variant) {
      // 50% of users see control, 50% see test
      variant = Math.random() < 0.5 ? 'control' : 'test';
    }

// Create response based on variant
    const response = variant === 'test'
      ? NextResponse.rewrite(new URL('/test', request.url))
      : NextResponse.next();

// Set cookie to keep user in same variant on return visits
    response.cookies.set('ab-variant', variant, {
      path: '/',
      maxAge: 60 * 60 * 24 * 30, // 30 days
      httpOnly: true, // Prevent client-side access
      sameSite: 'strict'
    });

return response;
  }

return NextResponse.next();
}

export const config = {
  matcher: ['/', '/test'],
};
```

In this pattern, the user sees `/` in their browser regardless of variant, but the content comes from either the root page (control) or the `/test` route (test variant) . To support multiple variants, organize your pages in variant-specific folders. For a homepage test, you might have a control page at `app/page.tsx` and a test variant at `app/test/page.tsx`. For more complex experiments involving multiple pages, you can create variant-specific route groups like `app/(control)/` and `app/(test)/` that contain entire parallel page structures. The middleware then rewrites to the appropriate group based on assignment . ```
app/
├── (control)/              # Control variant group
│   ├── page.tsx            # / → shows control homepage
│   ├── pricing/
│   │   └── page.tsx        # /pricing → control pricing
│   └── about/
│       └── page.tsx        # /about → control about
├── (test)/                 # Test variant group
│   ├── page.tsx            # / → shows test homepage
│   ├── pricing/
│   │   └── page.tsx        # /pricing → test pricing
│   └── about/
│       └── page.tsx        # /about → test about
└── middleware.ts
```

```tsx
// middleware.ts - Rewrite entire site to variant group
if (variant === 'test') {
  // Rewrite /pricing to /test/pricing
  const url = request.nextUrl.clone();
  url.pathname = `/test${url.pathname}`;
  return NextResponse.rewrite(url);
}
``` For experiments where you want consistent assignment without relying on cookies (e.g., for SEO testing or first visits), you can use deterministic hashing based on user identifiers. This approach hashes the user ID or IP address combined with the experiment ID to produce a consistent variant assignment . This ensures users always see the same variant regardless of cookie acceptance, while maintaining a predictable split percentage. ```tsx
// lib/ab-test.ts
import { createHash } from 'crypto';

export function getVariant(
  userId: string | undefined,
  experimentId: string,
  variants: Array<{ id: string; weight: number }>
): string {
  // Fallback to random if no user ID
  if (!userId) {
    const random = Math.random() * 100;
    let cumulative = 0;
    for (const variant of variants) {
      cumulative += variant.weight;
      if (random < cumulative) return variant.id;
    }
    return variants[0].id;
  }

// Create hash of userId + experimentId
  const hash = createHash('sha256')
    .update(`${userId}:${experimentId}`)
    .digest('hex');
  
  // Convert to number between 0-100
  const seed = parseInt(hash.slice(0, 8), 16) % 100;
  
  // Find variant based on seed
  let cumulative = 0;
  for (const variant of variants) {
    cumulative += variant.weight;
    if (seed < cumulative) return variant.id;
  }
  
  return variants[0].id;
}

// middleware.ts usage
const variant = getVariant(
  request.headers.get('x-user-id') ?? undefined,
  'homepage-redesign',
  [
    { id: 'control', weight: 50 },
    { id: 'test', weight: 50 }
  ]
);
``` A complete A/B testing solution requires tracking variant assignments. When middleware assigns a variant, you should make that information available to your analytics tools. Common approaches include: setting a cookie that client-side analytics can read,

How would you implement A/B testing using Next.js middleware and routing?

Implement A/B testing in Next.js by using middleware to assign users to variants based on cookies, deterministic hashing, or random assignment, then using NextResponse.rewrite to serve different page versions while keeping the original URL unchanged

How would you implement A/B testing using Next.js middleware and routing?

Implement A/B testing in Next.js by using middleware to assign users to variants based on cookies, deterministic hashing, or random assignment, then using NextResponse.rewrite to serve different page versions while keeping the original URL unchanged

Scenario Questions

Follow-up Questions