目次
VercelでChatGPTのクローン(Chatbot UI)をセルフホストしていたのですが、こんなメールが届きました。
解決したので備忘録です。
TL;DR
ひとまず最適化を無くしたい場合は下記を修正:
module.exports = {
images: {
unoptimized: true,
},
};
メールの内容
メールの内容を整理するため日本語にします。
どうやらImage Optimizationを使いすぎていたようです。
個人用だし使い始めて3日ぐらいなのに...なぜ？
使用量を確認する
まずは本当に使いすぎなのか調べてみます。
メールのusageをクリックしてリンク先に飛びます。
すると下記のようなOverview(概要)が表示されます。
ここでは詳細はわかりませんが、下の矢印をクリックして広げてスクロールすると...
確かにImage Optimizationだけが超過していることがわかります。
原因を突き止める
次に原因を突き止めるためにImage Optimizationと書かれてる欄をクリックします。
すると下記のようなImage Optimizationの詳細な管理画面が表示されます。
一番下の「View Source Images」をクリックすると、どの画像が最適化されているかがわかります。
どうやら私のアプリ（チャットボット）の場合、メニューバーにあるユーザーのプロフィール画像が常に表示されている上に、チャットのメッセージごとにユーザー画像が表示されるため、かなりの回数に達しているようです。
Image Optimizationを無効化する
私のアプリの場合、個人利用のためImage Optimizationは必要ないと判断しました。
以下の方法で無効化できます：
- 全体を無効化: プロジェクト全体で無効化する。
- 個別に無効化: 特定の画像だけを無効化する。
全体を無効化
アプリ全体で最適化を利用しない場合はnext.config.jsファイルに以下の設定を追加して、プロジェクト全体でImage Optimizationを無効化します。
ひとまずvercelのメールへ対応するならこれでいいと思います。
module.exports = {
images: {
unoptimized: true,
},
};
個別に無効化
画像の最適化自体はやった方がベターなはずなので、問題になっている（たくさん使われている）ところだけ無効化する方がアプリの品質としては良いはずです。
個別に無効化する場合は、Next.jsのnext/imageコンポーネントでunoptimizedプロパティを設定します。
import Image from 'next/image';
const MyImage = () => (
<Image
src="/path/to/image.jpg"
alt="Description"
width={500}
height={500}
+ unoptimized
/>
);
必要に応じて選択してください！