NextJS - Warning: Prop `className` did not match. when using styled components with semantic-ui-react

React에서 Next로 프로젝트 마이그레이션을 하는 도중 className 관련 에러가 떴다.

해당 부분은 서버에서 렌더링 될때 className과 클라이언트에서 렌더링 된 className이 달라서 생기는 문제이다.

이 부분은 babel의 플러그인으로 관리할 수 있다.

yarn add -D babel-plugin-styled-components

CNA(create-next-app)으로 만든 프로젝트의 최상단에 .babelrc 를 추가하여

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components", 
      {
        "ssr": true, // SSR을 위한 설정
        "displayName": true, // 클래스명에 컴포넌트 이름을 붙임
        "pure": true // dead code elimination (사용되지 않는 속성 제거)
      }
    ]
  ]
}

위의 코드를 작성해주어 해결을 할 수 있었다.