<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&#x2F;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&#x2F;react @storybook&#x2F;addons @storybook&#x2F;addon-a11y @storybook&#x2F;addon-actions @storybook&#x2F;addon-info @storybook&#x2F;addon-knobs @storybook&#x2F;addon-links @storybook&#x2F;addon-storyshots @types&#x2F;storybook__addon-info @types&#x2F;storybook__addon-storyshots @types&#x2F;storybook__react</code></pre><p><br></p><h2 id="hfa896f3411">設定ファイルを追加</h2><p>以下、必要な設定を追加します。<br></p><pre><code>.storybook&#x2F;main.js

const path = require(&quot;path&quot;);
const SRC_PATH = path.join(__dirname, &#x27;..&#x2F;src&#x27;);

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

import { addDecorator } from &#x27;@storybook&#x2F;react&#x27;;
import { withInfo } from &#x27;@storybook&#x2F;addon-info&#x27;;
import { withKnobs } from &#x27;@storybook&#x2F;addon-knobs&#x27;;
import { withA11y } from &#x27;@storybook&#x2F;addon-a11y&#x27;;

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"> になります。</span><br></p><pre><code>src&#x2F;components&#x2F;Button.tsx

import * as React from &quot;react&quot;;

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;&#x2F;button&gt;
  );
};

export default Button;</code></pre><p><br></p><pre><code>src&#x2F;components&#x2F;Button.stories.tsx

import { Meta } from &quot;@storybook&#x2F;react&#x2F;types-6-0&quot;;
import React from &quot;react&quot;;
import Button from &quot;.&#x2F;Button&quot;;

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

export const Default = (): JSX.Element =&gt; &lt;Button text=&quot;test&quot; &#x2F;&gt;;</code></pre><p><br></p><h2 id="hb047d44edf">Storybookを起動</h2><p>packageに以下を追加して起動できるようにします。<br></p><pre><code>package.json

&quot;scripts&quot;: {
    &quot;storybook&quot;: &quot;start-storybook -p 6006&quot;,
    &quot;build:storybook&quot;: &quot;build-storybook -o build&#x2F;storybook&quot;
  }</code></pre><p><br><strong>yarn storybook</strong>  で起動し、<a style="color:#6200ac" href="http://localhost:6006/" target="_blank" rel="noopener noreferrer">http:&#x2F;&#x2F;localhost:6006</a> にアクセス出来たら成功です。以下のような画面が出るはずです。お疲れ様でした。<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&#x2F;9&#x2F;20時点で推奨される記法で書いたつもりです。<br><br>また良き情報があれば発信したいと思います。<br><br>以上です。最後まで読んで頂きありがとうございます。</p>

Storybook

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