【Next.js】Imageコンポーネントで全てのドメインを許可したい

概要

Next.jsのImageコンポーネントを使用する際、外部のドメインのリンクにアクセスするとNext.js next/image で外部URLの画像を使いたいときにやることの記事にある通り、エラーとなります。設定で許可するドメインを追加すれば良いという話なのですが、ドメインの制限を特に設けたくない場合の対応をどうするかというメモ書きです。

前提

使用したNext.jsのバージョンは14.2.13です。

対応

How to allow all domains for Image nextjs config?のstackoverflowの記事で紹介されている通り、上記のバージョンではremotePatternsのhostnameの設定を**にすれば良さそうです。

設定サンプル

上記の記事そのままですが、next.configの設定を以下に記します。あまり無いと思いますが、httpも許可したい場合はその設定も追加をしてください。

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
};

export default nextConfig;