nextjs server

ストーリーブックNextJSサーバー

ストーリーブックNextJSサーバーは、孤立して反応コンポーネントを構築するための非常に実験的なフレームワークです。 Stable @storybook/nextjsとは異なり、NextJSアプリ内に埋め込まれ、NextJSによってレンダリングされます。

これにはいくつかの重要な利点があります。

1. アプリを開発しているときに1つのサーバーを起動するだけです
2. あなたのアプリが大部分の重い持ち上げを行っているので、それは「軽量」です
3. あなたのコンポーネントはあなたのアプリでそれらがどのようにレンダリングするかに対して同じようにレンダリングします
4. それを使用して、Reactサーバーコンポーネントを開発できます

• インストール
• 始める
• 開発する
  • ページディレクトリ
  • アプリディレクトリ
• カスタマイズ

インストール

インストールするには、既存のnextJSプロジェクトで以下を実行します。

npm create nextjs-storybook

次に、 next.config.jsを更新して、 withStorybookデコレーターを使用します。

 + 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サーバーがデフォルトのポート3000または設定されている場合は$PORT環境変数で実行されていない場合に失敗する可能性があります。指定されたポートが既に使用されている場合、NextJSは自動インクリメントで無料のポートを見つけ、これは現在の構成でストーリーブックを台無しにします。必要に応じて、さまざまなポート、ルートなどのセットアップをカスタマイズできます。

開発する

ストーリーブックで開発は公式ドキュメントに記録されていますが、Storybook NextJSサーバーには注意すべきニュアンスがいくつかあります。動作は、nextjsのpagesセットアップ（古い）またはappディレクトリで実行されているかどうかによって異なります。

アプリがpagesディレクトリで実行されている場合、ストーリーブックストーリーはReactクライアントコンポーネントとして実装されており、NextJSの安定したストーリーブックと非常に類似して動作する必要があります。

アプリがappディレクトリで実行されている場合、StorybookのストーリーはReact Serverコンポーネント（RSC）として実行されているため、さまざまなRSCの制約の対象となります。

ページディレクトリ

fixme

アプリディレクトリ

fixme

カスタマイズ

withStorybook関数は、いくつかの構成オプションを受け入れます。これらはすべてオプションです。

オプション	説明	デフォルト
ポート	next.jsアプリが実行されるポート。	process.env.port ?? 3000
sbport	そのストーリーブックが実行される内部ポート。	34567
マネージャーパス	Storybookの「マネージャー」UIへのURLパス。	「ストーリーブック」
PreviewPath	StorybookのストーリーへのURLパスプレビューiframe。	「StoryBook-Preview」
configdir	ストーリーブックの構成ファイルがあるディレクトリ。	'.storybook'
appdir	NextJSアプリディレクトリを使用するかどうか。	未定義