Next.js の Image Component は Netlify で動かない

Next.js を使いたいモチベーションとして next/image で提供される「動的」な Image Optimization があるんだけど Netlify のような「静的 (Static) 」なサイトをホスティングするサービスでは動かないよという話。

Next.js で作ったサイトを Netlify で公開したところ画像が表示されないので調査開始。まず辿り着いたのが Netlify Community.

require some backend function to handle the fetching of the image.

next/image の仕組みをちゃんと理解していなかったのだけれど、ここで動的に最適化された画像が生成されていたことに気が付く。

Next.js 側の Issue を読んでいくと、 workaround として next-optimized-images を利用することが suggest されている

Netlify で Next.js を動かす際には netlify/next-on-netlify の plugin を入れるのだけれど、こちら側では検討段階にあるっぽい。

Cloudflare Pages が Cloudflare Workers と組み合わせて dynamic applications を作れるようになると言っているので、こちらに期待を寄せつつ、今は next/image を使うなら Vercel 一択だということがわかった。