集成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 支持

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

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

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

参与贡献

现在您已准备好在 Storybook 中使用 Next.js 了。🎉 如果您在工作中使用了 Next.js，我们很想听听您关于 Next + Storybook 使用体验的反馈。

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

标签

贡献者

ShaunEvening