84,593
返回集成
next

集成Next.js与 Storybook

Next.js 通过扩展最新的 React 功能，使您能够创建完整的全栈 Web 应用程序
先决条件

此食谱假设您拥有 Next.js >= 12 应用程序。没有？按照 Next.js 的 设置说明 进行操作，然后运行

# Add Storybook:
npx storybook@latest init

设置您的项目

在没有 Storybook 的项目中

在 Next.js 项目的根目录中运行此命令后，按照提示进行操作

npx storybook@latest init

在拥有 Storybook 的项目中

此框架旨在与 Storybook 7 协同工作。如果您尚未使用 v7，请使用此命令进行升级

npx storybook@latest upgrade

自动迁移

运行上面的升级命令时，您应该会收到一个提示，询问您是否要迁移到 @storybook/nextjs，该命令应该会为您处理所有事宜。如果自动迁移不适用于您的项目，请参阅下面的手动迁移。

手动迁移

安装框架

yarn add -D @storybook/nextjs

更新您的 main.js 以更改 framework 属性

// .storybook/main.js
 
export default {
  // ...
  framework: {
    // name: '@storybook/react-webpack5', // Remove this
    name: '@storybook/nextjs', // Add this
    options: {},
  },
};

如果您正在使用 Storybook 插件来与 Next.js 集成，则在使用此框架时不再需要这些插件，可以将其删除

// .storybook/main.js
 
export default {
  // ...
  addons: [
    // ...
    // These can both be removed
    // 'storybook-addon-next',
    // 'storybook-addon-next-router',
  ],
};

(实验性) SWC 支持

如果您使用的是已经使用 SWC 的 Next.js 项目（例如，版本 14 或更高版本），则可以通过将以下内容添加到您的 main.js 中来在 Storybook 中启用它

// .storybook/main.js
 
export default {
  // ...
  framework: {
    name: '@storybook/nextjs',
    options: {
      builder: {
        useSWC: true, // Enables SWC support
      },
    },
  },
};

SWC 支持是在 7.6 版本中引入的，目前处于实验阶段，可能并不适用于所有项目。如果您遇到任何问题，请通过 在 GitHub 上发起讨论 与我们联系。

参与进来

现在您已准备好使用 Next.js 与 Storybook 协同工作。🎉 如果您在工作中使用 Next.js，我们非常乐意听取您对 Next.js + Storybook 体验的反馈。

加入维护者和我们蓬勃发展的社区，加入 Discord。

标签
贡献者
  • ShaunEvening
    ShaunEvening