Next.js v12でstorybook v6を起動したら表示がなんかおかしい - webpack4とwebpack5の捻じれ問題

yarn devをした時の表示とyarn storybookをした時の表示が違う

yarn dev

yarn storybook

webpackのバージョンの違い問題

Next.js v12がwebpack5を使っているのに対して、storybook v6がwebpack4を利用していることに気がついた。

next/imageなどの表示も上手くできていなかったので、下記のaddonを入れてみて気がついた。
https://storybook.js.org/addons/storybook-addon-next#supported-features

しかも、addonのexampleリポジトリでは明示的にwebpack5を使うようにする記述まで有る。
https://github.com/RyanClementsHax/storybook-addon-next/blob/main/examples/nextv12/.storybook/main.js

この記事に従ってstorybookにwebpack5を使ってもらう

https://zenn.dev/service_503/articles/a414701556e475

yarn add --dev @storybook/builder-webpack5 @storybook/manager-webpack5

module.exports = {
  core: {
    builder: 'webpack5',
},

webpack v4 -> v5の差分系エラーの解決

上記手順が終わったらyarn storybookをすると

Error: Cannot find module 'webpack/lib/util/makeSerializable.js'

のエラーが出たので下記の記事に従ってエラー解決
https://dev.classmethod.jp/articles/tried-to-add-storybook-to-nextjs-project/

その他.storybook/main.jsをいじったことでwebpack5の書き方に有っていない系のエラーを解決

参考までにfs系の書き方エラーの解決
https://stackoverflow.com/questions/64361940/webpack-error-configuration-node-has-an-unknown-property-fs

一応解決

謎の表示崩れは解決！
ただnext/imageの画像の表示がまだうまく行っていない。