📘
Next.js アプリの Storybook でも Vite を使いたい
概要
現状の Next.js は webpack を利用しているため、通常なら 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 が依存しているため、直接インストールする必要はありません。
.storybook/main.js の修正
Vite を Storybook でのみ使用する場合は、 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, '../')
}
}
})
}
}
Discussion