コンテナ環境でNext.js(next/image)を動かす際の注意点

先日， Next.jsで「ISR・SSGをしない」という選択肢 という記事を書きました． この記事では，ISR・SSGを諦めてSSRに寄せる構成のメリットについて触れており，awsを使用し，ECSの前にCloudFrontを置く構成を紹介しています． しかし，next/imageのデフォルトローダーで使用される画像最適化プログラムは，キャッシュの保存にファイルシステムを使用するため，一部コンテナ環境で動作させるには注意が必要です． 本記事では，next/imageの概要とキャッシュ機能の動作について触れます． また，コンテナ環境で動作させる際に問題になる点と，その問題を回避する方法について書きます． next/imageの概要 next/imageはNext.js組み込みの機能で，画像読み込みの際に遅延ロードや適切なサイズへの変形等の最適化処理を提供します． next/image が提供す