Next.js で babel-plugin-react-css-modules を使用する方法

あまり推奨されるやり方ではないですが、現状これ以外のやり方が見つかっていません…。

const path = require("path");
const genericNames = require("generic-names");
const sass = require("@zeit/next-sass");
const css = require("@zeit/next-css");
const withPlugins = require("next-compose-plugins");

module.exports = withPlugins([
  // reset.css などを導入する場合は必要
  [
    css,
    {
      cssModules: false,
    },
  ],
  [
    sass,
    {
      cssModules: true,
      cssLoaderOptions: {
        getLocalIdent: ({ resourcePath }, _, localName) => {
          const context = process.cwd();

          return genericNames("[path]___[name]__[local]___[hash:base64:5]", {
            context,
          })(localName, path.relative(context, resourcePath));
        },
      },
    },
  ],
]);

こんなの素じゃわからんですよね、難しい…。

こちらの記事を参考にさせてもらいました、ありがたやー。