[Next js] Warning : Props 'className' did not match

요런 에러가 떴다.
내가 Tailwind 를 쓰면서 className 쪽 에러를 발생하게했나? 싶어서 모든 코드를 훑으며 디버깅을 했는데.. 알고보니 styled component 문제였다^^ 핳핳 잊어버리지 않게 기록하려한다!

출처를 보고 문제를 해결했다.. 정말 감사합니다 ㅠ ㅠ

첫 페이지는 SSR로 작동하며 이후 CSR로 화면을 렌더링하게 되는데, 이때 서버에서 받은 해시+클래스명과 이후 클라이언트에서 작동하는 해시+클래스 명이 달라지면서 스타일을 불러올수 없는 문제가 발생한다.

바벨 플러그인 설정을 통해 위 문제를 해결할 수 있다고 한다.

1. 바벨 플러그인 설치

npm i babel-plugin-styled-components

babel-plugin-styled-components

2. root단에 .babelrc 파일 생성

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

babel option

fileName: 코드가 포함된 파일명을 알려줌
displayName : 클래스명에 해당 스타일 정보 추가
pure : 사용하지 않은 속성 제거

다시 한 번 표기하는 소중한 출처,,

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