I have a next js server running in digital ocean that uses the nextjs built-in image optimization. The images that use the optimization live under /_next/image/* path and don’t have extensions like jpeg/png. Images under this page are served as jpeg/webp/avif according to the browser’s request accept header.
Naively turning on the page rule with cache everything setting for everything under this page path would cause only one variation of the image (eg. avif) to be cached, causing browsers that don’t support the image format to break.
I’ve looked into using the Vary: Accept header (which next js sends by default now), but I’m not sure how to make it work on Cloudflare. The docs say that I’ll need to enable it by file extension, but my path doesn’t have an extension.
Does anyone have any recommendations on how to enable caching in this scenario?