如何在Next.js 13中内置运行Storybook v7（无需独立端口）

核心诉求 #

能否将Storybook作为Next.js应用的一部分运行（无需独立端口）？目前我需要在3000端口运行Next.js项目，6006端口运行Storybook，希望将Storybook UI作为Next.js的一个页面/路由直接访问。

项目详情 #

我正在开发一个使用Storybook展示组件的Next.js项目，相关依赖包版本如下：

{
  "name": "nextjs-storybook-temp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "URL=http://localhost:3000 && (open $URL || cmd.exe /c start $URL) && next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@dnd-kit/core": "^6.1.0",
    "@dnd-kit/sortable": "^8.0.0",
    "@faker-js/faker": "^8.1.0",
    "bootstrap": "^5.3.2",
    "chonky": "^2.3.2",
    "chonky-icon-fontawesome": "^2.3.2",
    "date-fns": "^2.30.0",
    "fs": "^0.0.1-security",
    "next": "13.5.4",
    "react": "^18",
    "react-dom": "^18",
    "react-imask": "^7.1.3",
    "react-js-cron": "^5.0.1",
    "react-multi-select-component": "^4.3.4",
    "react-quill": "^2.0.0",
    "react-toastify": "^9.1.3",
    "react-use": "^17.4.2",
    "react18-json-view": "^0.2.6",
    "sweetalert2": "^11.7.31",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.4.6",
    "@storybook/addon-interactions": "^7.4.6",
    "@storybook/addon-links": "^7.4.6",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/addon-styling-webpack": "^0.0.5",
    "@storybook/blocks": "^7.4.6",
    "@storybook/manager-api": "^7.4.6",
    "@storybook/nextjs": "^7.4.6",
    "@storybook/react": "^7.4.6",
    "@storybook/testing-library": "^0.2.2",
    "@storybook/theming": "^7.4.6",
    "css-loader": "^6.8.1",
    "eslint": "^8",
    "eslint-config-next": "13.5.4",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.69.0",
    "sass-loader": "^13.3.2",
    "storybook": "^7.4.6",
    "style-loader": "^3.3.3"
  }
}

目前我只能通过执行npm run storybook启动Storybook，再用iframe将其嵌入到Next.js页面中，代码如下：

export default function Components() {
  return (
    <iframe
      className="vh-100 position-relative z-1"
      src="http://localhost:6006/"
      style={{
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        width: "100%",
        height: "100%",
        border: "none",
        margin: 0,
        padding: 0,
        overflow: "hidden",
        zIndex: 999999,
      }}
    />
  );
}

我的Storybook配置文件main.js内容如下：

const config = {
  stories: [
    "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
    "@storybook/addon-styling-webpack",
    ({
        name: "@storybook/addon-styling-webpack",

        options: {
          rules: [{
        test: /\.css$/,
        sideEffects: true,
        use: [
            require.resolve("style-loader"),
            {
                loader: require.resolve("css-loader"),
                options: {
                    
                    
                },
            },
        ],
      },{
        test: /\.s[ac]ss$/,
        sideEffects: true,
        use: [
            require.resolve("style-loader"),
            {
                loader: require.resolve("css-loader"),
                options: {
                    
                    importLoaders: 2,
                },
            },
            require.resolve("resolve-url-loader"),
            {
                loader: require.resolve("sass-loader"),
                options: {
                    implementation: require.resolve("sass"),
                    sourceMap: true,
                    sassOptions: {},
                },
            },
        ],
      },],
        }
    })
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  // staticDirs: ['../public'],
};
export default config;

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