【Next.js】Storybookを導入してみた

おはこんにちばんは。Next.jsにStorybookを導入してみました。その手順を記載します。

実行環境

• Next.js 9.5.3
• React 16.13.1
• Storybook/react 6.0.12
• Node.js 12.18.0

packageを追加

いくつか便利なアドオンも追加しています。

yarn add -D @storybook/react @storybook/addons @storybook/addon-a11y @storybook/addon-actions @storybook/addon-info @storybook/addon-knobs @storybook/addon-links @storybook/addon-storyshots @types/storybook__addon-info @types/storybook__addon-storyshots @types/storybook__react

設定ファイルを追加

以下、必要な設定を追加します。

.storybook/main.js

const path = require("path");
const SRC_PATH = path.join(__dirname, '../src');

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-actions',
    '@storybook/addon-knobs',
    '@storybook/addon-links',
  ],
  webpackFinal: async(config, {configType}) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      include: [SRC_PATH],
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              presets: [['react-app', { flow: false, typescript: true }]],
            }
          },
          { loader: require.resolve('react-docgen-typescript-loader') }
        ]
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  }
};

.storybook/preview.js

import { addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { withKnobs } from '@storybook/addon-knobs';
import { withA11y } from '@storybook/addon-a11y';

addDecorator(withInfo);
addDecorator(withKnobs);
addDecorator(withA11y);

コンポーネントとStroyを追加

簡単なコンポーネントとStoryを以下の通り追加します。
Stroyの命名は、Component名 + .stories.tsx になります。

src/components/Button.tsx

import * as React from "react";

interface Props {
  text:string;
}

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Props;

const Button: React.FC<ButtonProps> = (props:ButtonProps) => {
  const { text } = props;

  return (
    <button {...props}>{text}</button>
  );
};

export default Button;

src/components/Button.stories.tsx

import { Meta } from "@storybook/react/types-6-0";
import React from "react";
import Button from "./Button";

export default {
  title: "Button",
  component: Button,
} as Meta;

export const Default = (): JSX.Element => <Button text="test" />;

Storybookを起動

packageに以下を追加して起動できるようにします。

package.json

"scripts": {
    "storybook": "start-storybook -p 6006",
    "build:storybook": "build-storybook -o build/storybook"
  }

yarn storybook  で起動し、http://localhost:6006 にアクセス出来たら成功です。以下のような画面が出るはずです。お疲れ様でした。

さいごに

たまたま触る気があったのでまとめてみました。調べると意外と古い情報が記事が多くありました。
例えば、Storybookの5系から推奨されるCFSで書かれていなかったり、設定ファイルが7系で消えるconfig.jsやaddons.jsを利用しているなど。移り変わりが早いですね...
なので、今回は2020/9/20時点で推奨される記法で書いたつもりです。

また良き情報があれば発信したいと思います。

以上です。最後まで読んで頂きありがとうございます。