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目錄。	不明確的