Next.js 15 边缘 A/B 测试与金丝雀发布实践：Middleware、Cookies 与指标上报

Next.js 15 边缘 A/B 测试与金丝雀发布实践概述利用 Edge Middleware 做分桶与实验流量路由，结合 Cookies 标记用户组与指标上报，形成闭环的 A/B 测试与金丝雀发布体系。分桶与 Cookies 标记// middleware.ts（简化）

import { NextResponse } from 'next/server'

import type { NextRequest } from 'next/server'

function getBucket(id: string) { return (parseInt(id.slice(-2), 36) % 10) < 2 ? 'B' : 'A' } // 20% B 组

export function middleware(req: NextRequest) {

const url = req.nextUrl.clone()

const cookie = req.cookies.get('ab_bucket')?.value

const uid = req.cookies.get('uid')?.value || crypto.randomUUID()

const bucket = cookie || getBucket(uid)

url.searchParams.set('ab', bucket)

const res = NextResponse.rewrite(url)

res.cookies.set('uid', uid)

res.cookies.set('ab_bucket', bucket, { maxAge: 60 * 60 * 24 * 30 })

return res

}

export const config = { matcher: ['/((?!_next|static|api).*)'] }

页面内实验变体export default function Page({ searchParams }: { searchParams: { ab?: string } }) {

const variant = searchParams.ab === 'B' ? 'B' : 'A'

return variant === 'B' ? <NewLayout /> : <OldLayout />

}

指标上报与决策// 客户端

export function report(ab: 'A' | 'B', metric: { name: string; value: number }) {

navigator.sendBeacon('/api/metrics', JSON.stringify({ ab, ...metric }))

}

PPR/RSC 协同变体内容静态化（`force-static`）与缓存标签统一，避免多变体下的缓存污染；实验结束后清理 Cookies 与缓存。技术参数与验证分桶比例可配置；实验误差控制；数据收敛后自动回滚或放量。注意事项隐私与合规；避免将敏感标识暴露给第三方；对 SEO 重要页面避免实验导致索引混乱。参考资料Next.js Middleware 文档；A/B 与金丝雀发布最佳实践。---发布信息：已发布 · 技术验证 · 阅读 34 分钟 · CC BY-SA 4.0