85,947
返回集成
next

集成Next.js与 Storybook

Next.js 使您能够通过扩展最新的 React 功能来创建全栈 Web 应用程序
前提条件

本指南假设您已安装 Next >= 12 应用程序。还没有安装？请按照 Next 的安装说明进行操作，然后运行

# Add Storybook:
npm create storybook@latest

设置您的项目

在没有 Storybook 的项目中

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

npm create storybook@latest

在已有 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 一起使用。🎉 如果您在工作中使用 Nextjs，我们很乐意听取您对 Next + Storybook 体验的反馈。

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

标签
贡献者
  • ShaunEvening
    ShaunEvening