styled-compoenets_ Prop `className` did not match.

styled_components 관련 에러.

콘솔창에 에러가 뜨면서 화면이 스타일대로 출력되지 않는다.

 

 

해결방법은 바벨플러그인 설치 및 설정추가.

루트디렉토리에 .babelrc 파일 생성 후 설정.

$ npm i babel-plugin-styled-components

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

 

 

참고
https://velog.io/@hwang-eunji/Styled-components-nextjs%EC%97%90%EC%84%9C-className-%EC%98%A4%EB%A5%98