next.js + styled-components className 오류해결방법

 

📖 목차

 

 

---

💡 이슈

Warning : Props 'className' did not match

위와 같은 에러메세지와 함께 페이지스타일이 다 깨지는 에러가 발생했다.
미디어쿼리를 넣다가 발생해서 미디어쿼리가 문제인 줄 알았는데,, 지우고 되돌려고 똑같은에러가 반복되었다 😂

💡 원인

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

💡 해결

바벨 플러그인 babel-plugin-styled-components를 설치하고 바벨설정(.babelrc)을 추가함으로 해결할 수 있다.
이 플러그인은 서버와 클라이언트의 클래스명을 일치 시켜주어 문제를 해결할 수 있도록 도와준다.

yarn add babel-plugin-styled-components

.bablerc

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

바벨 플러그인 설정은 배열로 담아 [0]인덱스에는 플러그인명, [1]인덱스에는 옵션을 위치시킨다.

 

추가 바벨 플러그인들

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

 

플러그인 설치, 설정파일 추가 후 서버를 껐다 키면 정상적으로 적용된 것을 확인할 수 있다!

 

💡 옵션적용 전/후 클래스명 비교

전 : sc-17fsht8-0 cbfSeC
후: Header__Container-sc-17fsht8-0 kZvURD