Next.jsにemotionを導入する時にstorybookにスタイルが当たってくれない問題

この記事について

以下の条件を満たす時、アプリ側とstorybookのemotionの設定が異なっててめんどくさかったので自分なりの対処法を記事にしました。

• Next.jsでbabelを使いたくない
• storybookのビルダーがwebpackの場合

環境

ライブラリ	バージョン
Next.js	13.3
storybook	7.0.2
@emotion/react	11.10.6

本題

突然ですがNext.jsでemotionを動かす方法は現状2種類あります。

• babelを入れて@emotion/babel-preset-css-propを使う
• ts.config.jsで以下のように設定する

tsconfig.json

"compilerOptions": {
    "jsxImportSource": "@emotion/react",
}

Next.js側とstorybook側の設定

Next側の設定

nextはswcを使っていたのでbabelを入れたくありません。よって2番目を使いました。
なぜtypescriptで設定できるかについてはこちらの記事をどうぞ

storybook側の設定

できれば同じようにtsconfigからやりたかったのですが、StorybookConfigのtypescriptのプロパティにjsxImportSourceがなかったので諦めました。
storybookには元々babel/coreが入ってるということで以下のような設定でプラグインをいれたら動きました。

$ npm install --save-dev @emotion/babel-preset-css-prop

.storybook/main.ts

import type { StorybookConfig } from '@storybook/nextjs'
import path from 'path'

const config: StorybookConfig = {
// 中略
  babel: async (options) => {
    options.presets?.push('@emotion/babel-preset-css-prop')
    return options
  },
}
export default config

感想

ちなみに、storybookのビルダーをviteにする場合はtsconfig.tsと同じように設定できるらしいです。