next memo storybook

Next.js に Storybook を導入する。

Keita Imatomi
2021-5-2 14:32

Next.js + Typescript プロジェクトを作るときに、とりあえずやっていること からの切り出しです。

image

https://storybook.js.org/

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

インストール

  1. Storybook をインストールする
$ npx sb init

アドオン

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

@storybook/preset-scss

scss対応する。

  1. 必要なパッケージをインストールする。
$ npm i -D @storybook/preset-scss css-loader sass sass-loader style-loader
  1. .storybook/main.jsaddonspreset-scssを追記する。

.storybook/main.js

module.exports = { // 中略 "addons": [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-scss", // 追加 ], }
  1. webpack4の場合は、sass-loader のバージョンが^11 だとエラーが出るので、^10を指定して入れなおす。webpack5の場合はこちら

package.json

"sass-loader": "^10",

@storybook/addon-viewport

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

  1. 必要なパッケージをインストールする。
$ npm i -D @storybook/addon-viewport
  1. .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

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

  1. 必要なパッケージをインストールする。
$ npm i -D storybook-addon-next-router
  1. .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" // 追加 ], }
  1. .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側でも同じように絶対パスを通す。

  1. .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; } }

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

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

  1. storybook/preview.js の冒頭でグローバルスタイルをインポートする。

storybook/preview.js

import '@/assets/styles/global.scss' // 以下略

起動する

  1. 以下のコマンドで storybook の起動
$ npm run storybook
こちらもどうぞ