フロントエンドカンファレンス北海道2025
レギュラートーク(20分)
Storybook v9 × Next.js App Router時代のコンポーネント設計〜RSC依存を抑えテストを活用する実践パターン〜
nabeliwo
nabeliwo
Storybook v9 で大幅に強化されたテスト機能は、コンポーネント開発の品質向上に非常に役立ちます。
しかし、Next.js App Router (RSC 使用)を採用していると、何も考えずにコンポーネントを実装すると Storybook の環境整備につまづくケースがあります。
Storybook では experimentalRSC フラグによる RSC サポートが試みられていますが、現時点（Next.js v15.3.3）では安定して動作しておらず、RSC 依存のコンポーネントは描画できない状況です。
本セッションでは、こうした制約の中でも Storybook のテスト機能をフル活用できるコンポーネント設計を目指し、RSC 依存を最小限にとどめる実践的なパターン・注意点を解説します。
Storybook を活かした堅牢なフロントエンド開発を目指す方におすすめの内容です。