caching - Next/Image でデジタルオーシャンスペースの画像をキャッシュする方法

Question

次のように、新しい next/image コンポーネントを使用して、digitaloceanspaces からアバター画像をロードしています。

import Image from "next/image";

...

<Image
   layout="fill"
   quality={1}
   loader={avatarLoader}
   src="839e7be6-1d2d-4164-bd33-befc3a7613c6_1610115441"
/>

ローダーは次のようになります。

export const avatarLoader = ({ src, width, quality }: ImageLoaderProps) => {
  return `https://donout.ams3.digitaloceanspaces.com/${src}?w=${width}&q=${quality || 75}`;
};

しかし、それはキャッシュしていません。そして、それを next.config に追加してみます

module.exports = {
  async headers() {
    return [
      {
        source: "https://donout.ams3.digitaloceanspaces.com/*",
        headers: [
          {
            key: "Cache-Control",
            value:
              "public, max-age=31536000, s-maxage=31536000, stale-while-revalidate",
          },
        ],
      },
    ];
  },
};

しかし、何も機能していません。リモートの URL から画像をキャッシュする方法を教えてもらえますか?