How to use Next Js and multiple images domain urls

Question

When using the Next Js Image component with external images, you are required to enter the domain name of the source of the image in the next.js config file. For multiple images from multiple domains (as an example, say 100 different image URLs), how will I be able to enter all the 100 domains in the next.js config file. What will be the best way to go about this to save time instead of having to enter 100s of domains manually. Thanks

Answer 1

You need to create a Next.js API if you are willing to bypass allowed domains limitation. API will be able to act as an image proxy and fetch the desired image from any host by given url as string.

Consider the example below:

/pages/api/imagefetcher.js

      export default async (req, res) => {
      const url = decodeURIComponent(req.query.url);
      const result = await fetch(url);
      const body = await result.body;
      body.pipe(res);
    };

/pages/index.jsx

        <Image
          alt='my image'
          src={`/api/imagefetcher?url=${encodeURIComponent(
            'https://i.imgur.com/iPeCach.png'
          )}`}
          width={350}
          height={350}
          quality={80}
        />

⚠️ You should not use this method as soon as you have a known hostname / domain list.