Next.js styled-components compile error 해결

 

Next.js에서 styled-components를 사용하는데 새로고침 할 때 마다 다음과 같은 에러를 발생했습니다. 

Next.js 12버전부터 babel 대신 swc를 사용하여 컴파일하도록 변경되었기 때문입니다.

 

 

.babelrc가 있다면 babel을 사용하게 되므로 아예 babelrc를 제거한 다음,

next.config.js 에서 styledComponents 설정만 해주면 swc를 사용하면서 문제를 해결할 수 있습니다.