Next.jsでStorybookを入れたときにハマったこと #React

ハマる部分は人それぞれっぽいので、いろいろな記事があったほうが良いだろうというので残しておきます

そもそもの入れ方とかは複雑ではなく公式なりQiitaなりをあさればたくさん出るかと思うのでココでは書きません

SCSSのimportが動かない

CSS ModulesをSCSSの文法で利用しているが、@import をするとエラーになった

似たようなのだと下記でも解決するかも
https://mk-engineer.com/posts/css-modules-storybook
https://github.com/storybookjs/storybook/issues/12464

.storybook/main.js

module.exports = {
  stories: [
    '../src/components/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
  webpackFinal: async (baseConfig) => {
    // scss を読み込む
    baseConfig.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1, // 1 => postcss-loader
            modules: {
              localIdentName: '[local]___[hash:base64:2]',
            },
          },
        },
        'sass-loader',
      ],
    });
    return {...baseConfig};
  }
}

画像が読み込まれない

先程のは別にNext.js特有じゃないと思いますが、こちらはNext.js特有と思われます
next/image でpublic下に置いた画像がエラーにはならないが表示されない

ココを参考に
https://xenox.dev/next-image-with-storybookjs/
これはstorybook上はnext/imageを上書きして、通常の<img> タグで表示する形になっていると思います。

.storybook/preview.js


// 下記を追記
Object.defineProperty(nextImage, 'default', {
  configurable: true,
  value: props => <img {...props} />
});

下記を変更

package.json

{
  "scripts": {

    "storybook": "start-storybook -s ./public -p 6006",

 }
}