Next.jsで最適化した画像をCloudflareでキャッシュできるようにする方法

Next.jsの<Image>コンポーネントを使うと簡単に画像を最適化できますが、これによって最適化した画像は、デフォルトではCloudflareにキャッシュされません。

実際、ブラウザーの開発者ツールのネットワークタブを確認すると、Next.jsで最適化した画像のレスポンスヘッダーがcf-cache-status: DYNAMICとなっており、Cloudflareにキャッシュされていないことがわかります。

画像がCloudflareにキャッシュされない理由

Next.jsで最適化した画像がCloudflareにキャッシュされないのは、Cloudflareのキャッシュのデフォルトの挙動が原因です。

Cloudflareは、デフォルトでは拡張子によってコンテンツをキャッシュするかどうかを判断するようになっています。

Cloudflareのキャッシュについてのドキュメントには、次のように書かれています。

Cloudflare only caches based on file extension and not by MIME type. The Cloudflare CDN does not cache HTML or JSON by default. Additionally, by default Cloudflare caches a website's robots.txt.

日本語訳：
CloudflareはMIMEタイプではなくファイル拡張子にもとづいてのみキャッシュします。Cloudflare CDNはデフォルトでHTMLとJSONをキャッシュしません。加えて、CloudflareはデフォルトでWebサイトのrobots.txtをキャッシュします。

——『Default Cache Behavior · Cloudflare Cache (CDN) docs』より

このように、CloudflareはコンテンツのMIMEタイプではなくファイル拡張子でキャッシュするかを判断しています。

Next.jsで最適化した画像のパスは、次のようになっています。

/_next/image/?url=<元の画像のURL>&w=<幅>&q=<最適化のクオリティ>

このパスからクエリーパラメーターを取り除くと、/_next/image/となります。

クエリーパラメーターを取り除いたパスにファイル拡張子が含まれていないので、Cloudflareはキャッシュすべきコンテンツか判断できず、結果としてキャッシュされないということです。

Cloudflareにキャッシュさせるには？

Cloudflareのダッシュボードでキャッシュルールを変更することで、Next.jsの画像をキャッシュできるようになります。

1. 設定を変更したいWebサイトのCloudflareダッシュボードを開きます

2. サイドバーから［Caching］>［Cache Rules］を開きます

3. ［ルールを作成］をクリックします

4. ルールの内容を次のように設定します

   • ルール名：（わかりやすい任意の名前）
   • カスタムフィルタ式
   • • フィールド：［URIパス］
     • オペレーター：［次で始まる］
     • 値：/_next/image
   • キャッシュの適格性：［キャッシュの対象］
   • エッジTTL：［存在する場合は cache-control ヘッダーを使用し、存在しない場合は Cloudflare のデフォルト TTL でリクエストのレスポンス ステータスをキャッシュします］（※お好みでほかのものでも可）

   

5. ルールを保存します

6. Webサイトを開いてリロードし、画像のレスポンスヘッダーがcf-cache-status: HITとなっていることを確認します