Next.js Styled-Components ClassName 에러 해결

[hyunjoebrother]

[에러]
Next.js에 Styled-Components가 적용되지 않음

[해결방법]

1. npm i babel-plugin-styled-components 플러그인 설치
2. 프로젝트 루트에 .babelrc 파일을 추가하여 아래와 같이 작성

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

[출처]
https://velog.io/@qwe6293/%EC%98%A4%EB%A5%98-Next.js-Styled-Components-ClassName-%EC%98%A4%EB%A5%98