Next.jsのサイトをFirebase Hostingに置くとき画像最適化をオフにするという選択も一考の価値アリ

はじめに

Next.jsで作成したウェブサイトをGoogle Firebaseでホスティングしている場合、Next.jsのバージョン更新に伴い、画像の最適化機能が正常に動作せず、画像表示に問題が発生することがあります。
これは、Firebase側がNext.jsの最新バージョンに対応した処理を行ったことによって、旧バージョンで問題がおきていると思われます。

画像最適化の必要性の再考

大量のアクセスがあり、画像最適化による転送量削減が重要なウェブサイトでは、最適化機能は有益です。
しかし、アクセスが少ないサイトでは、最適化による効果は限定的です。
そのようなサイトで、デプロイ時に最適化の問題で画像が表示されなくなると、原因調査に時間を取られ非効率です。
したがって、多くの場合、画像最適化を無効にすることで、時間的な運用コストを削減できると考えられます。

画像最適化の無効化方法

この結論に達したため、私は画像最適化を無効にしました。設定方法は以下の通りです。

next.config.jsを編集し、以下の設定を追加します。

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        unoptimized: true,
    },
}

module.exports = nextConfig

この設定により、Next.jsのImageコンポーネントによる画像最適化が無効化されます。

画像最適化の無効化による効果

画像最適化を無効にしたことで、デプロイ時のGoogle Cloud Functionsでの画像最適化処理が省略され、デプロイ速度が向上しました。
また、Cloud Functionsの利用が減少したため、デプロイ時のクラウド料金も若干下がったと考えられます。

この結論に達したGPT4oのアドバイス

github copilot chat経由で画像が表示されない問題について、GPT4oと相談してたら「最適化切れば？」と言われて衝撃受けました。
驚きのAIビックコンサルタント。

根本的な原因としては私のWindowsのデプロイ環境でCloud Functionsのデプロイ設定がうまくいっていなかったのが原因のようですが、最適化きっちゃえば、この問題と付き合わないで済むことに気が付きました😊