imagesの設定

はじめに

どうもこんにちは！
今回は、imagesの設定について書きます！
11章で画像のアップロードを実装したらエラーにつまずいてしまい、その時の原因やわかったことを軽めに書きたいと思います。

next.config.jsとは

Next.jsのプロジェクトに関する設定を行うファイル。
この設定の中でimageオプションを使うと、next/imageコンポーネントで外部ホストから画像を安全に読み込むことができます。

image設定

next/imageコンポーネントは、パフォーマンスを最適化するために画像の自動的な最適化やレスポンシブな画像の機能などを提供します。
ただし、セキュリティの理由から、外部ホストからの画像を読み込む場合はそのホストを許可する必要があります。
これをnext.config.jsのimage設定で行う。

エラー

画像アップロードを実装後、試しに画像をアップロードをしたらエラーが出てしまいました。
以下、エラー文
Error: Invalid src prop on next/image

原因

next/imageコンポーネントは、外部ホストから画像を読み込む場合、
そのホストをnext.config.jsで設定する必要があるのですが、
外部ホスト(アップロードしたい画像)を設定していなかったのが原因でした！

//next.config.js

module.exports = {
  images: {
    domains: ["tjhooopggjnjqmiohimd.supabase.co"], // ここにSupabaseのホストを追加
  },
};

解説

next.config.jsファイルに、外部から画像を読み込めるように外部ホストを追加します。

remotePatternsは、外部の画像URLが特定の条件に一致する場合に、
その画像をnext/imageで安全に読み込めるようにします。

protocolは、基本httpsで大丈夫です。
現在のWEB標準では、セキュリティ上の理由からhttpsが推奨されています。

hostnameは、外部から取得するドメイン名を指定します。
以下が、今回実際に追加した画像URLです
https://pixabay.com/ja/photos/search/dog-8598827_1280.jpg/

ここで、ドメイン部分を抜き出しhostnameに設定する。
pixabay.com

tjhooopggjnjqmiohimd.supabase.coは、Supabaseストレージにある画像やその他のメディアファイルにアクセスするためのホスト名。
今回Supabaseのストレージから画像を読み込むので、Supabaseホストも追加します。

//next.config.js

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'pixabay.com', // アップロードしたい外部ホスト名を設定。
      },
      {
        protocol: 'https',
        hostname: 'tjhooopggjnjqmiohimd.supabase.co', // Supabaseのホストも追加
      },
    ],
  },
};

export default nextConfig;

さいご

Next.jsの画像最適化機能を使用するには、必ず外部ホストを設定する必要があるので
忘れずに設定しましょう！