nextjs server

Storybook NextJS服务器

Storybook NextJS服务器是一个高度实验性的框架，可以隔离地构建React组件。与Stable @storybook/nextjs不同，它嵌入了您的NextJS应用中，并由NextJS渲染。

这有一些关键好处：

1. 开发应用程序时，您只需要启动一台服务器
2. 这是“轻巧”，因为您的应用程序正在进行大部分繁重的工作
3. 您的组件与它们在应用程序中的呈现方式相同
4. 您可以使用它来开发React服务器组件

• 安装
• 开始
• 发展
  • 页面目录
  • 应用目录
• 定制

安装

要安装，请在现有的NextJS项目中运行以下内容：

npm create nextjs-storybook

然后更新您的next.config.js以使用withStorybook Decorator。

 + const withStorybook = require('@storybook/nextjs-server/next-config')(/* sb config */);

/** @type {import('next').NextConfig} */
- module.exports = {/* nextjs config */}
+ module.exports = withStorybook({/* nextjs config */}); 

开始

安装人员将示例故事添加到/src/stories或/stories目录中。要查看您的故事书，只需运行您的NextJS Dev服务器：

npm run dev

您的应用程序应像正常状态显示，但应该获得一条新路线， /storybook ，以显示您的故事。

如果您的NextJS Dev Server未在默认端口上运行，则可能会失败，该端口为3000或$PORT环境变量设置。如果已经采用了指定的端口，则NextJS将自动灌溉以找到一个免费端口，并且在当前配置中弄乱了故事书。您可以根据需要为不同端口，路线等自定义设置。

发展

官方文档中记录了Storybook中的开发，但是在Storybook NextJS服务器中有一些细微差别。该行为不同，具体取决于您是在NextJS的pages设置（旧）还是app Directory中运行。

如果您的应用程序在pages目录中运行，则故事书的故事将作为React客户端组件实现，并且应与NextJS的稳定故事书非常相似。

因此，如果您的应用程序正在app目录中运行，则Storybook的故事作为React Server组件（RSC）运行，因此受到各种RSC约束。

页面目录

FIXME

应用目录

FIXME

定制

withStorybook函数接受多个配置选项，所有这些选项都是可选的：

选项	描述	默认
港口	the next.js应用程序将继续运行的端口。	process.env.port ?? 3000
SBPORT	该故事书的内部端口将继续。	34567
经理路径	Storybook的“经理” UI的URL路径。	“故事书”
PreviewPath	URL故事书的故事预览iframe。	“故事书概述”
configdir	故事书的配置文件的目录。	'.storybook'
AppDir	是否使用NextJS App目录。	不明确的