内容提要
本文探讨了在使用 Next.js 和 Cloudflare 时，图片优化导致的高额费用问题。通过分析 HTTP Header，发现默认配置缺乏缓存控制，导致每次请求都需重新处理图片。作者建议使用自定义加载器和 Cloudflare 的原生图片调整服务，以提高缓存效率并降低成本。最终，通过优化配置，成功提升了图片请求的缓存命中率，显著减少了计算费用。
关键要点
-
Next.js 的 <Image> 组件在 Cloudflare 上的默认配置导致高额费用，缺乏缓存控制。
-
HTTP Header 分析显示，默认图片优化没有 Cache-Control，导致每次请求都需重新处理图片。
-
尝试在项目中添加缓存头无效，Next.js 默认的图片处理端点无法被有效拦截和缓存。
-
建议使用自定义加载器和 Cloudflare 的原生图片调整服务，以提高缓存效率。
-
通过优化配置，成功提升了图片请求的缓存命中率，显著减少了计算费用。
-
开启 Cache Reserve 功能可以避免缓存被淘汰，从而减少不必要的重算。
-
最终优化后，图片请求的 Header 显示缓存命中，计算资源消耗降至最低。
延伸问答
为什么使用 Next.js 的 <Image> 组件在 Cloudflare 上会导致高额费用？
因为默认配置缺乏缓存控制，导致每次请求都需重新处理图片，从而增加了计算费用。
如何优化 Next.js 图片请求以降低 Cloudflare 的费用？
建议使用自定义加载器和 Cloudflare 的原生图片调整服务，以提高缓存效率。
HTTP Header 中缺少 Cache-Control 会有什么影响？
缺少 Cache-Control 会导致浏览器每次请求都重新加载图片，无法利用缓存。
如何实现 Cloudflare 的 Cache Reserve 功能？
开启 Cache Reserve 功能可以避免缓存被淘汰，从而减少不必要的重算。
使用自定义加载器的步骤是什么？
在项目中创建 image-loader.ts 文件，定义加载器逻辑，并在 next.config.ts 中配置使用自定义加载器。
优化后，如何判断图片请求的缓存效果？
可以通过查看 HTTP Header 中的 Cache-Control 和 cf-cache-status 来判断缓存命中情况。
