문제

기존 프로젝트를 Next.js로 마이그레이션 하던 도중, Styled-component가 rerendering시 적용이 안되는 문제가 발생함.

문제 상황

정상모습

시도한 방법 1

바벨 플러그인 설치후 .babelrc을 다음과 같이 설정해 보았다.

{
  "presets": ["next/babel"],
  "plugins": ["babel-plugin-styled-components"]
}

폰트 관련해서 설정과 충돌되어 다른 문제가 발생하였다.

시도한 방법 2

next.config.mjs에 컴파일러 속성을 추가해줬다.

compiler: {
    styledComponents: true,
},

정상적으로 최초랜더시나 리랜더링시에도 제대로 styled-components가 적용이 되어 랜더링 되었다.