Next.jsをFirebaseにデプロイすると<Image>が使えない

はじめに

Next.jsのアプリケーションのデプロイで動作が予想通りに行かなかったのでまとめます

問題

以下のようなコードを書いてでデプロイをしたところ画像が表示されませんでした

 <article className="flex items-center w-[300px] cursor-pointer group">
            <div className="relative">
              <div className="w-24 h-24 rounded-full overflow-hidden">
                <Image
                  src="/sample-article.jpg"
                  alt="sample article"
                  width={100}
                  height={100}
                  className="object-cover object-center w-full h-full group-hover:scale-110 transition-transform duration-300"
                />
              </div>

解決方法

Firebaseとの相性が悪く画像最適化するImageタグが使えないようです。

HTMLの<img>タグに変えることで表示するようにしました

ちなみにsvgはうまく読み込める。pngやwebp、jpgなどはできなさそうでした

おわりに

FirebaseでNext.jsをやるなら新しいFirebase Appを使うほうが良さそうです

参考