Next.js Custom 'localIdentName'

Place this inside the webpack function in the next.config.js file to patch the localIdentName used by css-loader for CSS Modules by Next.js.

Copywebpack: (config, {buildId, dev, isServer, defaultLoaders, webpack}) => {

  ...

  config.module.rules.forEach(({oneOf}) => oneOf?.forEach(({use}) => {
    use?.forEach?.(({options: {modules}}) => {
      if(modules?.getLocalIdent) {
        delete modules.getLocalIdent
        modules.localIdentName = '[hash:base64:4]'
      }
    })
  }))

  ...

  return config
}

This can be scoped to production builds by testing for the dev argument.

Tested Next.js v11.0.1, webpack v5.47.0