Next.js/Storybook remote images not working

Question

I'm getting the following error when looking at a component in Storybook that uses Next Image:

Invalid src prop (https://picsum.photos/720/775) on `next/image`, hostname "picsum.photos" is not configured under images in your `next.config.js

Here's what my next.config.js looks like:

module.exports = {
  images: {
    domains: [process.env.NEXT_IMAGE_DOMAIN, "picsum.photos"],
  },
};

And yes, I have https://storybook.js.org/addons/storybook-addon-next installed.

Here's what my storybook main.js looks like:

const path = require("path");

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    "../components/**/*.stories.mdx",
    "../components/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: "storybook-addon-next",
      options: {
        nextConfigPath: path.resolve(__dirname, "../next.config.js"),
      },
    },
  ],
  framework: "@storybook/react",
  core: {
    builder: "webpack5",
  },
  staticDirs: ["../public"],
};

Building Next works fine, but when running Storybook, getting that error. Seems like it's not reading the next.config.js file?

Answer 1

There's an issue with storybook and next 12.1.5, downgrade next to 12.1.4 it should work just fine.

https://github.com/RyanClementsHax/storybook-addon-next/issues/72