NextJS + StyledComponents

yarn add styled-components

styled components 설치 후 잘 사용하다가 아래와 같은 에러가 나왔다.

난생 처음 보는 에러였기에 당황했고 구글링을 했을 때는 babel-plugin-styled-components를 설치하여 해결하는 방법이 나와 시도해보았지만 해결은 되지않았다. 오히려 다른 종류의 에러가 나와 내가 설정을 잘못했나 싶은 마음이 컸다.

찾아보니 nextjs 12버전부터는 root에 next.config.js를 설정해주면 간단하게 해결이 된다고 작성되어있다.

module.exports = {
  compiler: {
    styledComponents: true,
  },
};