Next/ImageはCloudflare Pagesの無料プランで使えない

Next.jsには、画像をキャッシュして各デバイスサイズに最適化して配信するNext/Imageコンポーネントがあり、通常は面倒な画像最適化を簡単に実現できますが、Cloudflare Pagesの無料プランでは使えません。

これは、next.config.jsのimagesにドメインを追加しても、カスタムローダーを使っても同じで、無料プランでは使えないようになっています。

私自身この問題に困った経緯があり、Next/ImageをCloudflare Pagesで使うためのページを見て設定してみたのですが、そもそも、そのページの親ページであるCloudflare Image Resizingに無料プランでは使えないと明記されていました。

そのため、外部画像だけではなく内部画像もNext/Imageコンポーネントで最適化された状態で配信することはできず、unoptimized: falseを設定して最適化機能を無効化するか、外部サイトから直接配信するか、課金する必要があります。

執筆時点、有料プランの最安値であるProプランは月20ドルと、VercelやNetlifyと同じ水準なので、それなら他のホスティングサービスでもいいかなと個人的には思ってしまいますが、Cloudflare系のサービスに馴染みのある方は課金するのも1つの手だと思います。

ちなみに、月5ドルから利用できるCloudflare Imagesという似た名前のサービスもありますが、これは上記のCloudflare Images Resizeとは違うサービスなのでご注意ください。