【第1回】Next.js × storybookについて学ぶ。~環境構築~

動作環境

"next": "15.0.3",
"storybook": "8.4.6",
"tailwindcss": "^3.4.1",
"typescript": "^5"

Next.jsプロジェクトの立ち上げ

npx create-next-app@latest storybook-demo-app

各選択肢は以下のように選択した。

Ok to proceed? (y) y
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like your code inside a `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to use Turbopack for next dev? ... No
√ Would you like to customize the import alias (@/* by default)? ... No

storybookのインストールと起動

npx storybook@latest init
yarn storybook

すると、以下のようにデフォルトで準備されているstoriesフォルダ内のコンポーネントを確認できる。

storybookを利用するには.tsxファイルとそれに伴うstories.tsxファイルが必要である。
今回は、copmponets/ 配下にコンポーネントを作成し、同じディレクトリに.stories.tsxファイルを配置する。

components/ 配下の.storiesbookファイルを読み込めるようにする。

./storybook内のmain.tsを編集する。

import type { StorybookConfig } from "@storybook/nextjs";

const config: StorybookConfig = {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
    + "../components/***/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  staticDirs: ["..\\public"],
};
export default config;

作成したコンポーネントをstorybookで確認してみる。

今回はcolorを受け取れるボタンを作成し、赤色と青色の色のボタンをstorybook上で確認する。

ColorChangeBtn.tsx

interface IcolorChangeBtn {
  color: "red" | "blue";
}

const ColorChangeBtn = ({ color }: IcolorChangeBtn) => {
  if (color === "red") {
    return (
      <>
        <button className="border-2 border-black m-1 rounded-md p-1 bg-red-500">
          色変更
        </button>
      </>
    );
  } else if (color === "blue") {
    return (
      <>
        <button className="border-2 border-black m-1 rounded-md p-1 bg-blue-500">
          色変更
        </button>
      </>
    );
  }
};
export default ColorChangeBtn;

続いて、storybookファイルを作成する。

ColorChanege.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";

import ColorChangeBtn from "./ColorChangeBtn";

const meta: Meta<typeof ColorChangeBtn> = {
  component: ColorChangeBtn,
  tags: ["autodocs"],
};

//以下でさまざまなstoriesを登録する。ここで登録したものがstorybook上で確認可能になる。
export default meta;
type Story = StoryObj<typeof ColorChangeBtn>;

export const Red: Story = {
  args: { color: "red" },
};

export const Blue: Story = {
  args: { color: "blue" },
};

解説

args

propsに与える要素を指定できる。今回の場合はcolorに"red", "blue"を与えている。

tags: ["autodocs"]

指定するとドキュメントを自動生成してくれる。
コンポーネントの使い方をグループで共有する際などに便利である。
ドキュメントを見ることで、そのコンポーネントの役割をすぐに把握することができる。