Next.js v13でfirebase storage(emulator)の画像を表示しようとしたらエラーが発生した

出会った事象

firebaseのuploadBytes関数を用いてアップロードした画像ファイルのurlをgetDownloadURL関数でurlを取得して以下のようにnext/Imageタグを用いて出力しようとしたところ、次のエラーが発生した

対象のコード

page.tsx

<Image
  src={imageUrl} // getDownloadURL関数で取得したurlを使用
  alt=""
　　　　...styles
/>

エラーメッセージ

Error: Invalid src prop (http://localhost:9199/v0/b/...{filepathの名前}) on `next/image`, hostname "localhost" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

読んでみると、localhostというホスト名はnext.config.jsで設定されていないとのこと。
設定の仕方については、その下のリンクに詳しく書かれていた。

解決法

next.config.jsに次のように追記する

next.config.js

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'localhost',
      },
      {
        protocol: "https",
        hostname: "firebasestorage.googleapis.com",
      },
    ],
  },
}

remotePatternsについて

公式でnext.config.jsのimage.remotePatternsについて以下のように説明されていた

To protect your application from malicious users, configuration is required in order to use external images. This ensures that only external images from your account can be served from the Next.js Image Optimization API. These external images can be configured with the remotePatterns property in your next.config.js file, as shown below:

next.config.js

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}

https://nextjs.org/docs/pages/api-reference/components/image#remotepatterns

deepL様で和訳してみると
「悪意のあるユーザーからアプリケーションを保護するため、外部画像を使用するには設定が必要です。これにより、Next.js Image Optimization APIから提供される外部画像は、自分のアカウントの画像だけになります。(略)」
つまり, firebase等の外部サービスから画像を持ってくる場合にはnext.config.jsでダウンロード先のホスト名とプロトコル等を指定してね、ということだった。

解決法についての説明

改めて自分の設定を説明すると、ローカルで使用しているエミュレータ、本番で使っているfirebasestorageのホスト名を記述することで、外部画像ファイルをダウンロードできるようにしている。