Nextjs v13 + Next compiler(SWC)
을 사용Emotion
을 사용하며, MUI
에 추가적인 Style을 Wrapping하여 사용@emotion/babel-plugin
의 components as selectors 기능
을 사용하기 위해 MUI문서에선 babel을 설정하라는 가이드라인을 제시
SWC를 사용하는 상황에서 babel을 사용할 수 없는 상황
module.exports = {
...
plugins: [
[
"@emotion",
{
importMap: {
"@mui/system": {
styled: {
canonicalImport: ["@emotion/styled", "default"],
styledBaseImport: ["@mui/system", "styled"]
}
},
"@mui/material/styles": {
styled: {
canonicalImport: ["@emotion/styled", "default"],
styledBaseImport: ["@mui/material/styles", "styled"]
}
}
}
}
]
]
};
Nextjs Compiler 옵션에 추가된 내용을 확인
https://github.com/vercel/next.js/commit/cb8fdc6db6280b847e752d884afbd99dd1290b40
const compilerConfig = {
compiler: {
// 콘솔 제거
removeConsole: {
exclude: ['error', 'info', 'warn'],
},
// Emotion Component Selector 추가
emotion: {
importMap: {
'@mui/system': {
styled: {
canonicalImport: ['@emotion/styled', 'default'],
styledBaseImport: ['@mui/system', 'styled'],
},
},
'@mui/material/styles': {
styled: {
canonicalImport: ['@emotion/styled', 'default'],
styledBaseImport: ['@mui/material/styles', 'styled'],
},
},
},
},
},
};
next.config.js의 compiler에 추가