I am running a Next.js app and a Storybook component library. I would like to use next/image in Storybook so that I can take advantage of the image optimization.

I followed this article to mock next/image in Storbook. This library is bundled using rollup to export only the React components to be consumed by a Next.js app. However, when install in the Next app an error is thrown with

Nothing was returned from render

I also tried passing the unoptimised prop to next/image only in Storybook dev mode, so when it was installed in node_modules there would be the next.js app and a next.js server to handle the image, but get thrown with

hostname "...." is not configured under images in your `next.config.js

I have included a next.config.js file in package root, as well as in the next.js app root with the image domains array.

TLDR:

How can I use next/image inside a NPM component library that is then consumed by a Next.js app