Storybook加载Next.js配置异常：CDN图片无法正常显示

原因分析 #

Storybook是独立于Next.js的开发环境，默认不会读取next.config.js中的images.domains配置；同时你当前的webpack配置合并方式错误，没有正确集成Next.js的webpack逻辑，导致Image组件在Storybook中仍会校验域名。

方法一：修复webpack配置，正确集成Next.js配置 #

修改.storybook/main.js中的webpackFinal函数，正确调用Next.js的webpack配置处理函数：

// ./.storybook/main.js
const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "staticDir": ['../public'],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-css-modules",
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  webpackFinal: async (config) => {
    config.resolve.plugins = [new TsconfigPathsPlugin()];
    const nextConfig = require('../next.config.js');
    
    // 调用Next.js的webpack配置函数，传入当前config和必要上下文
    const updatedConfig = await nextConfig.webpack(config, {
      defaultLoaders: { babel: {} },
      dev: process.env.NODE_ENV !== 'production',
      isServer: false,
    });
    
    return updatedConfig;
  },
}

方法二：强制Next.js Image组件使用非优化模式（更简单） #

调整preview.js写法，确保全局开启unoptimized模式跳过域名校验：

1. 更新.storybook/preview.js：

// ./.storybook/preview.js
import "../styles/globals.css";
import OriginalNextImage from "next/image";

// 自定义Image组件，强制开启unoptimized
export const NextImage = (props) => {
  return <OriginalNextImage {...props} unoptimized={true} />;
};

export const decorators = [
  (Story) => {
    // 全局替换Image组件
    return <Story args={{ ...Story.args, Image: NextImage }} />;
  },
];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

2. 在.storybook/main.js的webpackFinal中添加别名，确保所有next/image导入指向自定义组件：

// ./.storybook/main.js
webpackFinal: async (config) => {
  config.resolve.plugins = [new TsconfigPathsPlugin()];
  // 添加别名
  config.resolve.alias['next/image'] = path.resolve(__dirname, './preview.js');
  return config;
},

验证 #

重启Storybook后加载CDN图片，此时Image组件会跳过域名校验，报错应该消失。

内容的提问来源于stack exchange，提问作者Peter Harley Broom