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