Next.js に Storybook を導入する。

imatomix
2021年5月2日 14:32

コンポーネントをカタログ化して確認できるので、デザイナー/エンジニアとの共同開発はもちろん、個人開発でもとても便利。 Atomic Design が捗る。

インストール

Storybook をインストールする
$ npx sb init
/.storybook以下に必要なファイルが作成される。

アドオン

アドオンでいろいろ便利機能を追加していく。

scssに対応するためのアドオン。

必要なパッケージをインストールする。
$ npm i -D @storybook/preset-scss css-loader sass sass-loader style-loader
.storybook/main.jsaddonspreset-scssを追記する。
.storybook/main.js
module.exports = { // 中略 "addons": [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-scss", // 追加 ], }
webpack4の場合は、sass-loader のバージョンが^11 だとエラーが出るので、^10を指定して入れなおす。webpack5にする場合はこちら
package.json
"sass-loader": "^10",

レスポンシブを確認するために、Storybook上でMediaQueryを切り替えられるようにするアドオン。

必要なパッケージをインストールする。
$ npm i -D @storybook/addon-viewport
.storybook/main.jsaddonsaddon-viewportを追記する。
.storybook/main.js
module.exports = { // 中略 "addons": [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-scss", "@storybook/addon-viewport" // 追加 ], }

コンポーネント内で next/router を使用している場合、そのままではエラーが出るのでこのアドオンでエラーを回避する。

必要なパッケージをインストールする。
$ npm i -D storybook-addon-next-router
.storybook/main.jsaddonsaddon-viewportを追記する。
.storybook/main.js
module.exports = { // 中略 "addons": [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-scss", "@storybook/addon-viewport", "storybook-addon-next-router" // 追加 ], }
.storybook/preview.jsProviderを登録する。
.storybook/preview.js
import { RouterContext } from "next/dist/shared/lib/router-context"; // next 11.2 以上の場合 import { RouterContext } from "next/dist/next-server/lib/router-context"; // next < 11.2 の場合 export const parameters = { nextRouter: { Provider: RouterContext.Provider, }, }

絶対パスを通す

Next.js 側で babel-plugin-module-resolver で絶対パスを使用している場合、そのままだとエラーが出るのでstorybook側でも同じように絶対パスを通す。

.storybook/main.jsに以下を追記する。
.storybook/main.js
const path = require('path') const rootPath = path.resolve(__dirname, '../src/') module.exports = { // 中略 webpackFinal: async (config, { configType }) => { config.resolve.alias['@'] = rootPath return config; } }

グローバルスタイルを読み込ませる

デフォルトのままだと使用するコンポーネント内でインポートしているスタイルは読み込まれるが、コンポーネント外で読み込んでいるグローバルスタイルまでは読み込んでくれない。

storybook/preview.js の冒頭でグローバルスタイルをインポートする。
.storybook/preview.js
import '@/assets/styles/global.scss' // 以下略

起動する

以下のコマンドで storybook の起動
$ npm run storybook