next.jsでcssModuleのcamelCaseオプションを使う方法

経緯

next.js にて react-transition-group を使用したアプリを作成を行っていたところ、　cssModule　の　camelCase　オプションを使いたくなった。

cssMocule camelCase オプションについて

cssのケバブケースをキャメルケースに変更してくれるオプション
下記のようなクラスの指定が可能となる

Foo.module.css

.item-container {
  background: red;
}

Foo.js

import styles from './Foo.module.css'

export const Foo = () => {
  return (
    <div className={styles.itemContainer}>
      <h1>hello world</h1>
    </div>
  )
}

結論

next.config.js を下記のようにすればOK

next.config.js

const path = require('path')

module.exports = {
  reactStrictMode: true,
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    const rules = config.module.rules
      .find((rule) => typeof rule.oneOf === "object")
      .oneOf.filter((rule) => Array.isArray(rule.use));

    rules.forEach((rule) => {
      rule.use.forEach((moduleLoader) => {
        if (
          moduleLoader.loader.includes("css-loader", "dist") &&
          typeof moduleLoader.options.modules === "object"
        ) {
          moduleLoader.options = {
            ...moduleLoader.options,
            modules: {
              ...moduleLoader.options.modules,
              exportLocalsConvention: "camelCase",
            },
          };
        }
      });
    });

    return config;
  }
};

参考

https://github.com/vercel/next.js/discussions/11267#discussioncomment-101154