如何配置Storybook 7.4支持Next.js 13.4的@/路径导入语法？

算力阿峰

2026-7-11

解决Storybook 7.4识别Next.js 13.4 @/路径别名的问题

完全可行，不需要替换实际路径，通过配置Storybook的webpack解析规则就能让它支持Next.js的@/路径别名，具体步骤如下：

方法一：手动配置webpack别名

打开项目根目录下的.storybook/main.js（或.storybook/main.ts）文件
在配置中添加webpackFinal字段，手动设置路径别名：

const path = require('path'); // JS文件用此写法，TS文件用`import path from 'path';`

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: {
    name: '@storybook/nextjs',
    options: {}
  },
  webpackFinal: async (config) => {
    // 扩展webpack的别名配置
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../src'), // 路径需对应你项目中@指向的实际目录，比如根目录下的src
    };
    return config;
  },
};

方法二：复用Next.js的tsconfig/jsconfig路径配置

如果你的项目已经在tsconfig.json（或jsconfig.json）中配置了@的路径映射（示例如下）：

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

可以通过插件让webpack自动读取这些配置，无需重复写别名：

安装依赖：

npm install tsconfig-paths-webpack-plugin --save-dev

修改.storybook/main.js：

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

module.exports = {
  // 其他原有配置...
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, '../tsconfig.json'), // 指向你的tsconfig文件路径
      }),
    ];
    return config;
  },
};