Next.js 15 Client Hints DPR-Width 图片变体投递实践 Route Handler Accept-CH

概览Client Hints 允许浏览器传递设备像素比（DPR）与渲染宽度（Width），服务器据此选择合适的图片变体。Route Handlers 可设置 `Accept-CH` 与 `Vary`，实现高效图像投递。接口实现app/api/image/route.tsexport const runtime = 'edge'

export async function GET(req: Request) {

const dpr = Number(req.headers.get('sec-ch-dpr') || 1)

const width = Number(req.headers.get('sec-ch-width') || 800)

const q = dpr >= 2 ? 0.7 : 0.85

const targetW = Math.min(Math.max(width, 400), 1600)

const url = `https://cdn.example.com/img/hero?w=${targetW}&q=${Math.round(q * 100)}`

const img = await fetch(url)

return new Response(img.body, {

headers: {

'Content-Type': img.headers.get('content-type') || 'image/avif',

'Accept-CH': 'DPR, Width',

'Vary': 'Sec-CH-DPR, Sec-CH-Width',

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

},

})

}

治理要点设置 `Accept-CH` 提示浏览器发送 Client Hints；使用 `Vary` 保证缓存按 Hints 维度分割。对高 DPR 使用较低质量因子以平衡体积与视觉；控制宽度范围避免过度大图。与 `next/image` 或 CDN 变体生成协同，统一参数与缓存策略。验证与指标浏览器：Chrome 120+ 支持；其他浏览器退化为默认变体Next.js：15.0+；Edge Runtime：稳定图像加载效率更高；视觉质量与体积平衡良好