How to properly configure babel for material-ui in Next.js?

DOCS:

https://material-ui.com/guides/minimizing-bundle-size/#development-environment

"Create a .babelrc.js file in the root directory of your project:

const plugins = [
  [
    'babel-plugin-transform-imports',
    {
      '@material-ui/core': {
        // Use "transform: '@material-ui/core/${member}'," if your bundler does not support ES modules
        'transform': '@material-ui/core/esm/${member}',
        'preventFullImport': true
      },
      '@material-ui/icons': {
        // Use "transform: '@material-ui/icons/${member}'," if your bundler does not support ES modules
        'transform': '@material-ui/icons/esm/${member}',
        'preventFullImport': true
      }
    }
  ]
];

module.exports = {plugins};"

https://nextjs.org/docs/advanced-features/customizing-babel-config

"To add presets/plugins with custom configuration, do it on the next/babel preset like so:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {},
        "transform-runtime": {},
        "styled-jsx": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}"

---

QUESTION:

How to properly configure babel for material-ui in Next.js ? My implementation below is apparently incorrect as import { ConstructionOutlined } from '@material-ui/icons';is still causing very long load times in dev mode. I observed no error messages when trying the below implementation and variations.

---

CODE:

{
    "presets": [
        [
        "next/babel",
        {
            "babel-plugin-transform-imports":
            {
                "@material-ui/core": {
                    // Use "transform: '@material-ui/core/${member}'," if your bundler does not support ES modules
                    "transform": "@material-ui/core/esm/${member}",
                    "preventFullImport": true
                },
                "@material-ui/icons": {
                    // Use "transform: '@material-ui/icons/${member}'," if your bundler does not support ES modules
                    "transform": "@material-ui/icons/esm/${member}",
                    "preventFullImport": true
                }
            }
        }
        ]
    ],
    "plugins": []
}

OR

module.exports = {
    presets: [
        ["next/babel"]
    ],
    plugins: [
         [
             'babel-plugin-import',
             {
                 'libraryName': '@material-ui/core',
                 // Use "'libraryDirectory': ''," if your bundler does not support ES modules
                 'libraryDirectory': 'esm',
                 'camel2DashComponentName': false
             },
             'core'
         ],
         [
             'babel-plugin-import',
             {
                 'libraryName': '@material-ui/icons',
                 // Use "'libraryDirectory': ''," if your bundler does not support ES modules
                 'libraryDirectory': 'esm',
                 'camel2DashComponentName': false
             },
             'icons'
         ],
    ]
}

OR ELSE ?

from How to properly configure babel for material-ui in Next.js?