Next.js 리렌더링하면 Styled-Components 적용 안됨

문제

새로고침을 했더니

'className did not match'

에러가 뜨며 css가 모두 사라져 버리는 현상 발생

이유는 서버에서 받은 해시 + 클래스명과 새로고침 후 클라이언트에서 받은 해시+클래스명이 달라서 발생하는 문제였다.

 

해결방법

1. 바벨 플러그인 설치

yarn add babel-plugin-styled-components

 

2. .babelrc설정

파일 생성 후 아래 코드 작성

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

 

 

---

참고

https://velog.io/@hongdol/Next.js-TS-%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81%EC%8B%9C-Styled-Components-%EC%A0%81%EC%9A%A9-%EC%95%88%EB%90%98%EB%8A%94-%EC%97%90%EB%9F%AC

Next.js TS 리렌더링시 Styled-Components 적용 안되는 에러

 

https://wonit.tistory.com/369

[Next.js] renderPage 함수로 styled-components 오류 방지하기.