Next.js 15 Accept 内容协商 WebP-AVIF 图片投递实践

核心价值依据客户端 `Accept` 自动选择最佳图片格式，优先 AVIF 其次 WebP，降级 JPEG。设置 `Vary: Accept` 与适当的缓存策略，兼顾 CDN 与客户端缓存一致性。Route Handler 实现export const runtime = 'edge' export async function GET(req: Request) { const accept = req.headers.get('accept') || '' const format = accept.includes('image/avif') ? 'avif' : accept.includes('image/webp') ? 'webp' : 'jpeg' const url = `https://cdn.example.com/hero.${format}` const res = await fetch(url) return new Response(res.body, { headers: { 'Content-Type': res.headers.get('content-type') || `image/${format}`, 'Vary': 'Accept', 'Cache-Control': 'public, max-age=600, s-maxage=3600', }, }) } 要点`Accept` 内容协商需与 `Vary: Accept` 搭配以避免缓存污染。可结合 `Client Hints` DPR/Width 进一步选择尺寸与质量；本实践聚焦格式协商。与应用协同对首屏大图使用协商格式以降低体积，结合 `priority` 或预加载策略提升渲染速度。结论基于 `Accept` 的图片格式协商在 Next.js 15 Edge 下实现简单且高效，配合正确的缓存头可在保证一致性的同时显著降低传输与首包时间。