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のデプロイ設定がうまくいっていなかったのが原因のようですが、最適化きっちゃえば、この問題と付き合わないで済むことに気が付きました😊
Discussion