Next.js 15 UA-CH 客户端提示 设备-平台识别 与个性化治理实践

核心价值相比传统 UA 字符串，UA-CH 提供更稳定与隐私友好的设备/平台信息。配合 `Accept-CH` 与 `Vary`，确保缓存与 CDN 在个性化场景下的一致性。Middleware 注入 Accept-CHimport { NextResponse } from 'next/server'

export function middleware() {

const res = NextResponse.next()

res.headers.set('accept-ch', 'Sec-CH-UA, Sec-CH-UA-Platform')

return res

}

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

Route Handler 个性化响应export const runtime = 'edge'

export async function GET(req: Request) {

const ua = req.headers.get('sec-ch-ua') || ''

const plat = req.headers.get('sec-ch-ua-platform') || ''

const isMobile = /"Mobile"/i.test(ua)

const payload = { platform: plat, mobile: isMobile }

return new Response(JSON.stringify(payload), {

headers: {

'Content-Type': 'application/json; charset=utf-8',

'Accept-CH': 'Sec-CH-UA, Sec-CH-UA-Platform',

'Vary': 'Sec-CH-UA, Sec-CH-UA-Platform',

'Cache-Control': 'public, max-age=60',

},

})

}

治理建议对细粒度设备特性仍应依赖响应式与特性检测；UA-CH 适用于平台与大类判断。缓存层必须包含相应 `Vary`，避免将不同平台响应混淆。结论UA-CH 在设备与平台识别上更稳健。与 `Accept-CH/Vary` 协同使用，可在保护隐私的同时实现合理个性化与缓存治理。