Hono と Cloudflare Images で Next.js の画像リサイズを再現する

BRANK

Hono Advent Calendar 2024 4 日目の記事です。遅れてすみません！！！！！！！！！！！！！！！！！！！！！去年はかけなかったけど今年は書けたのでよかったです..........TL;DRCloudflare Images を使えば、Next.js の next/image による画像最適化を再現できます。さらに、Cloudflare Images の「blur」オプションを利用することで、base64 プレースホルダー画像をサーバー側で生成する必要がなくなり、処理が効率化されます。コスト面でも、Vercel の画像最適化機能（$5/1000 枚）に比べ、Cloudflare Images は大幅に安価（$0.5/1000 枚）です。デモ @cloudflare/next-on-pages や @opennextjs/cloudflare 環境でも next/image を使いたくて調査した結果の記事です。結果として Vercel に hosting されている Next.js にも適用できることが分かりました。Cloudflare Images で cdn-cgi を利用する方法は紹介されています(Integrate with frameworks)が、このやり方だと _next/image には搭載されている Accept Header による format の自動選択ができないので自前実装を選択しています。最適化サーバーを作って custom loader を使うことも可能ですが、_next/image を…