Next.js 使您能够通过扩展最新的 React 功能来创建全栈 Web 应用程序 本食谱向您展示如何在 Storybook 中充分利用 Next.js。

 先决条件

本食谱假设您有一个 Next >= 12 应用程序。没有这个吗？按照 Next 的设置说明进行操作，然后运行：

<span><span># Add Storybook:</span></span>
<span><span>npx</span><span> </span><span>storybook@latest</span><span> </span><span>init</span></span>

 设置您的项目

在没有故事书的项目中

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

<span><span>npx</span><span> </span><span>storybook@latest</span><span> </span><span>init</span></span>

在 Storybook 的项目中

该框架旨在与 Storybook 7 配合使用。如果您尚未使用 v7，请使用以下命令进行升级：

<span><span>npx</span><span> </span><span>storybook@latest</span><span> </span><span>upgrade</span></span>

 自动迁移

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

 手动迁移

 安装框架：

<span><span>yarn</span><span> </span><span>add</span><span> </span><span>-D</span><span> </span><span>@storybook/nextjs</span></span>

更新您的 main.js 以更改框架属性：

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

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

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

（实验性）SWC 支持

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

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

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

 参与其中

现在您已准备好将 Next.js 与 Storybook 一起使用。 🎉 如果您在工作中使用 Nextjs，我们很高兴收到您对 Next + Storybook 体验的反馈。

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