Open7
Next.js12系にStorybookを導入するときに必要な設定メモ
meijinStorybookをNext.js製アプリケーションに導入していると、Next.js独自のコンポーネントであるImageやRouterの利用箇所でエラーになったため、アドオンの導入など設定した
meijinAddon
まずは以下をインストール
ガイドに則って、.storybook/main.jsを編集する
▼例
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'storybook-addon-next',
],
next.config.jsを空でもいいから作る
next.config.jsが無いとエラーになるので、空でもいいから作る
module.exports = {};
.storybook/main.jsに設定追加
Webpack5を使うための設定を追記する
以下のコードを参照。
core: {
builder: 'webpack5',
},
webpack5対応のために追加パッケージをインストール
調べていたら以下のパッケージも必要みたいだったので追加インストール
- @storybook/builder-webpack5
- @storybook/manager-webpack5
"@storybook/builder-webpack5": "^6.4.19",
"@storybook/manager-webpack5": "^6.4.19",
この辺に公式による記載もあった
meijinエラー修正
まだエラーが出たので、ググったところ以下の修正でエラーが止まり、無事起動した。
meijin総評
全体的に、Experimentalな内容が散見されるのでメンテナンス性が心配だが、Storybook側はプロダクトコードに影響しないのでどんどんモダンにする方針で悪くはなさそう、とは思う