如何配置Storybook以支持NextJS项目中的@/别名路径？

NextJS里的@/别名通常在tsconfig.json或jsconfig.json中配置，但Storybook默认不会自动识别，以下是几种解决方法：

方法一：让Storybook自动读取NextJS配置（推荐，适用于Storybook 7.x+） #

如果你使用的是Storybook 7.x及以上版本，并且已经安装了@storybook/nextjs官方插件，Storybook会自动读取tsconfig.json/jsconfig.json里的paths配置，无需额外操作。

如果自动识别失效，或者你用的是旧版本Storybook，可手动配置webpack别名。

方法二：手动配置webpack解析别名 #

1. 打开Storybook的配置文件，通常是项目根目录下的.storybook/main.js或.storybook/main.ts
2. 通过webpack的resolve.alias配置别名，也可以借助插件自动同步tsconfig/jsconfig的配置，避免重复写路径：

示例（TypeScript项目） #

首先确认你的tsconfig.json已有如下配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

然后修改.storybook/main.js：

const path = require('path');
const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // 保留你原有的其他配置，比如stories、addons等
  webpackFinal: async (config) => {
    // 方法1：手动添加别名
    config.resolve.alias['@'] = path.resolve(__dirname, '../src');
    
    // 方法2：用插件自动读取tsconfig的paths（更推荐，同步配置）
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, '../tsconfig.json'),
      }),
    ];

    return config;
  },
};

JavaScript项目适配 #

如果是JS项目，把tsconfig.json换成jsconfig.json即可，tsconfig-paths-webpack-plugin同样支持读取jsconfig的配置。

方法三：排查缓存问题 #

如果配置后仍报错，尝试清除Storybook缓存并重启：

npx storybook clean

确认路径是否正确：.storybook目录下的../src对应项目根目录的src文件夹，需和你的项目结构匹配。

内容的提问来源于stack exchange，提问作者philippe_b