Next.jsにStorybookを導入したい

新規のNext.jsのプロジェクトでStorybookを導入したので、メモしました。

参考ドキュメントはこちらになります。

https://storybook.js.org/blog/get-started-with-storybook-and-next-js/

1、Webpack5で新しいストーリーブックを初期化する

まずは下記のコマンドでストーリーブックをinstallします。

npx sb init --builder webpack5

上のコマンドでは、 --builder webpack5 オプションを使用していますが、

Next.jsv11以降はWebpack5を使用するので。StorybookでWebpack5を使用して、統合とパフォーマンスを向上させています。

2, Next.jsの全ページのストーリーを作成する

Next.jsとStorybookには、非常に互換性のあるコンポーネントモデルがあり、Next.jsはページのコンポーネントを使用し、Storybookはドキュメントとテストのコンポーネントを使用します。

これにより、StorybookはNext.jsの優れたコンポーネント駆動型開発環境になります。公式ドキュメントに沿ってNext.jsホームページのストーリーを作成しました。

// /stories/pages/home.stories.tsx

import Home from '../../pages/index';

export default {
  title: 'Pages/Home',
  component: Home,
};

3、共有のグローバルスタイルシートをpreview.jsにインポート

次に、Next.jsのグローバルスタイルをインポートします.storybook/preview.jsの1行目にインポートしました。

// .storybook/preview.jsimport "../styles/globals.css";

// .storybook/preview.js
import "../styles/globals.css";

お試しでnpm run storybookで動作確認をします。

エラーでした。

調べたところ、TypeScriptでwebpack5を使用する場合、storybook側がwebpack4を参照してしまうらしいです。

storybookのリポジトリでissueに上がっていますが、明確な解決方法はまだないようでした。

.storybook/main.jsに下記のオプションを追記することで回避できるようなので試してみました。

// .storybook/main.js
module.exports = {
  "typescript" : { reactDocgen: false }, // 追記しました
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "webpack5"
  }
}

再度、npm run storybookで動作確認をします。無事に動作しました！

4,ストーリー内のNext.js画像の最適化を解除します

しかしながら、画像が404で表示できていませんでした。公式によるとpackage.jsonを更新して、画像のディレクトリを指定することで回避できます。

// package.json

"scripts": {
  "storybook": "start-storybook -p 6006 -s ./public", // 変更しました
  "build-storybook": "build-storybook -s public" // 変更しました
}

再度、npm run storybookで動作確認をします。

無事に画像も表示されました。

以上になります。

これから開発頑張ります。

お読みいただきありがとうございました。