Next.js, Storybook, images from external source

[UniversalTraveller]

When I use Next.js <image> I have to configure the image source in next.config.js. The problem is that my podcast player fetches images from unknown external sources. As a workaround, I load the podcast title images via res.cloudinary.com. But is there a better way? I don't really want to rely on a third party for this.

The second problem is that the images don't get displayed in Storybook. I get this error message:

Invalid src prop (https://res.cloudinary.com/demo/image/fetch/https://ssl-static.libsyn.com/p/assets/7/9/0/7/790703531a3c8eca/iTunes_Artwork.png) on `next/image`, hostname "res.cloudinary.com" is not configured under images in your `next.config.js`

See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Does storybook has its own next.config.js?

[alexclaes]

Hi Andreas,

First question

Regarding your first question, I see two approaches:

a) Writing a Next.js API Route providing a proxy feature like res.cloudinary.com

• receives a image resource URL
• load the resource
• pass the resource via response back to the client

This example might push you into the right direction:
https://maxschmitt.me/posts/next-js-api-proxy/

b) Trying out a new experimental (!) Next.js config. I haven't used this before, but you could try to set ** for hostname and pathname.

https://nextjs.org/docs/api-reference/next/image#remote-patterns

Second question:

If you want to use Next.js components outside of a Next.js application (like Storybook), you need to write a mock in some situations. With images, you need to disable the optimization. Here is a good blog post with a solution:

https://storybook.js.org/blog/get-started-with-storybook-and-next-js/

The interesting part starts at "2. Use the unoptimized prop for Next.js Images in Storybook"