📘

Next.js アプリの Storybook でも Vite を使いたい

2022/10/04に公開約1,600字

概要

現状の Next.jswebpack を利用しているため、通常なら Storybook を導入する際はあわせて webpack を使用していますが、 Storybook ぐらいは Vite の爆速HMR を使用したいので差し替えてみた差異の作業メモになります。

webpack 5 ビルダーのアンインストール

webpack を使って Storybook をビルドしていると思うので、これを削除しちゃいます。
(yarn を使用しますが、 npm の場合は適宜読み替えてください)

$ yarn remove @storybook/builder-webpack5 @storybook/manager-webpack5

vite と vite ビルダーのインストール

Next.js では Vite を使用していないので、 Vite 本体とビルダーをインストールします。

yarn add -D vite @storybook/builder-vite

ちなみに @vitejs/plugin-react については、 @storybook/builder-vite が依存しているため、直接インストールする必要はありません。
https://github.com/storybookjs/builder-vite/blob/858b856dcf99a920c831c2c6c428d693d7ea1892/packages/builder-vite/package.json#L33

.storybook/main.js の修正

ViteStorybook でのみ使用する場合は、 vite.config.js にあたる設定ファイルは不要です。

代わりに Storybook の設定ファイルである .storybook/main.js にて、 core.builder@storybook/builder-vite にします。

また、必要に応じて viteFinal フィールドで Vite の設定を拡張できます。

.storybook/main.js
const { mergeConfig } = require('vite')
const path = require('path')

module.exports = {
  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-vite' // これを追加
  },
  // import に alias を設定するなど、Viteの設定を拡張する場合は viteFinal を定義する
  viteFinal: async config => {
    return mergeConfig(config, {
      resolve: {
        alias: {
          '@': path.resolve(__dirname, '../')
        }
      }
    })
  }
}
GitHubで編集を提案

Discussion

ログインするとコメントできます