Next.jsとStorybookを組み合わせる方法

1. Next.jsプロジェクトのセットアップ:

   • Next.jsプロジェクトを作成します。ターミナルで以下のコマンドを実行します:

     npx create-next-app my-app
     cd my-app

2. Storybookのインストール:

   • Next.jsプロジェクトのルートディレクトリで、Storybookをインストールします。ターミナルで以下のコマンドを実行します:

     npx sb init

3. Storybookの設定:

   • Storybookの設定ファイルである.storybook/main.jsを開きます。
   • storiesオプションに、Storybookが認識するコンポーネントファイルのパスを指定します。例えば、storiesディレクトリ内の.stories.jsファイルを指定する場合、以下のように設定します:

     module.exports = {
     stories: ['../src/components//*.stories.js'],
     };

4. Storybookの起動:

   • Storybookを起動し、ブラウザでプレビューを確認します。ターミナルで以下のコマンドを実行します:

     npm run storybook

5. Next.jsにStorybookを統合:

   • Next.jsのpages/_app.jsファイルを開きます。
   • import '../.storybook/preview.js';を追加します。これにより、Next.jsアプリ内でStorybookのコンポーネントが使用できるようになります。

これで、Next.jsとStorybookが組み合わさった環境が構築されました。次に、コンポーネントのストーリーを作成し、Storybook上でそれらをプレビューすることができます。

以上が、Next.jsとStorybookを組み合わせる方法の概要です。詳細な設定やコード例は、公式のNext.jsドキュメントやStorybookドキュメントを参照してください。