A/B Testing with the new Next.js 12 Middleware

pages/
|  index.tsx
|  index_new.tsx
|  _middleware.ts
lib/
|  abtesting.ts

/* pages/index.tsx */
import Link from "next/link"

export default function HomePage() {
  return <>
    <h1>My Site</h1>
    <Link href="/signup"><a>Sign Up</a></Link>
  </>
}

/* pages/index_new.tsx */
import Link from "next/link"

export default function HomePageVariant() {
  return <>
    <h1>Welcome to My Site!</h1>
    <Link href="/signup"><a>Get Started Today!</a></Link>
  </>
}

/* pages/_middleware.ts */
import { NextRequest, NextResponse } from 'next/server'
import { 
  initRequest,
  getExperimentContext,
  trackRequest
} from "../lib/abtesting";

export function middleware(req: NextRequest) {
  initRequest(req)

  // Default to normal Next.js routing
  let res = NextResponse.next()

  // If the user is on the homepage, run the experiment
  const { pathname } = req.nextUrl;
  if (pathname === "/") {
    const ctx = getExperimentContext(req)
    const { value: newPath } = ctx.run({
      key: "homepage-copy-experiment",
      variations: ["/", "/index_new"]
    })

    // Route to the assigned page path
    res = NextResponse.rewrite(newPath)
  }

  // Server-side analytics tracking
  trackRequest(req, res)

  return res
}

/* lib/abtesting.ts */
import { GrowthBook } from "@growthbook/growthbook"
import { NextRequest, NextResponse } from "next/server"
import Mixpanel from "mixpanel"

const COOKIE_NAME = 'distinct_id'

const mixpanel = Mixpanel.init(process.env.MIXPANEL_TOKEN)

// Get the user's ip and distinct_id from the request
// Generate a new distinct_id if it doesn't exist yet
let distinct_id: string, ip: string
export function initRequest(req: NextRequest) {
  distinct_id = req.cookies[COOKIE_NAME] || crypto.randomUUID()
  ip = req.ip
}

// Function to get the GrowthBook A/B testing client
export function getExperimentContext(req: NextRequest) {
  return new GrowthBook({
    user: {id: distinct_id},
    trackingCallback: (experiment, result) => {
      mixpanel.track("Experiment Viewed", {
        distinct_id,
        ip,
        experimentId: experiment.key,
        variationId: result.variationId,
      })
    }
  })
}

export function trackRequest(req: NextRequest) {
  // Track the page view in Mixpanel
  mixpanel.track("Page View", {
    distinct_id,
    ip,
    path: req.nextUrl.pathname
  })

  // Persist the distinct_id in a cookie for future requests
  if (!req.cookies[COOKIE_NAME]) {
    res.cookie(COOKIE_NAME, distinct_id)
  }
}