<p><span style="color:#24292e">おはこんにちばんは。</span><a href="https://github.com/IshinoJun/nextjs-storybook" target="_blank" rel="noopener noreferrer">Next.jsにStorybookを導入</a>してみました<span style="color:#24292e">。その手順を記載します。</span><br></p><h2 id="hfe5a8eaaf7"><span style="color:#24292e">実行環境</span></h2><ul><li>Next.js 9.5.3</li><li>React 16.13.1</li><li>Storybook/react 6.0.12</li><li>Node.js 12.18.0</li></ul><p><br></p><h2 id="hc2e1b5db24">packageを追加</h2><p>いくつか便利なアドオンも追加しています。<br></p><pre><code>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</code></pre><p><br></p><h2 id="hfa896f3411">設定ファイルを追加</h2><p>以下、必要な設定を追加します。<br></p><pre><code>.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}) =&gt; {
    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;
  }
};</code></pre><p><br></p><pre><code>.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);</code></pre><p><br></p><h2 id="hc389788d77">コンポーネントとStroyを追加</h2><p>簡単なコンポーネントとStoryを以下の通り追加します。<br>Stroyの命名は、<code>Component名 + .stories.tsx</code><span style="color:#333333">&nbsp;になります。</span><br></p><pre><code>src/components/Button.tsx

import * as React from "react";

interface Props {
  text:string;
}

type ButtonProps = React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt; &amp; Props;

const Button: React.FC&lt;ButtonProps&gt; = (props:ButtonProps) =&gt; {
  const { text } = props;

  return (
    &lt;button {...props}&gt;{text}&lt;/button&gt;
  );
};

export default Button;</code></pre><p><br></p><pre><code>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 =&gt; &lt;Button text="test" /&gt;;</code></pre><p><br></p><h2 id="hb047d44edf">Storybookを起動</h2><p>packageに以下を追加して起動できるようにします。<br></p><pre><code>package.json

"scripts": {
    "storybook": "start-storybook -p 6006",
    "build:storybook": "build-storybook -o build/storybook"
  }</code></pre><p><br><strong>yarn storybook</strong>&nbsp;&nbsp;で起動し、<a style="color:#6200ac" href="http://localhost:6006/" target="_blank" rel="noopener noreferrer">http://localhost:6006</a>&nbsp;にアクセス出来たら成功です。以下のような画面が出るはずです。お疲れ様でした。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/storybook.png" alt=""><br></p><h2 id="h1afe451c43">さいごに</h2><p>たまたま触る気があったのでまとめてみました。調べると意外と古い情報が記事が多くありました。<br>例えば、Storybookの5系から推奨されるCFSで書かれていなかったり、設定ファイルが7系で消えるconfig.jsやaddons.jsを利用しているなど。移り変わりが早いですね...<br>なので、今回は2020/9/20時点で推奨される記法で書いたつもりです。<br><br>また良き情報があれば発信したいと思います。<br><br>以上です。最後まで読んで頂きありがとうございます。</p>

Storybook

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