"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