[LeafyLog 프로젝트] next.js에서 styled-components에 state넣었더니..

오늘 해피하게 코딩을 하다가 next.js로 인해 당황을 좀 하였다.

분명 예쁘게 잘 정리가 되어 있던 것이 새로고침만 하면 스타일이 적용이 안 되는 문제이다.

 

또한 오류메세지는 위와 같다.

이는 명백한 next.js 이슈다.

 

내 코드를 다시 살펴 봤다.

 

위 코드에서 shift는 state이다. next.js 서버에서 styled-components의 shift를 인식 못했기 때문일 것이다.

 

저 부분을 어떻게 고치면 좋을까 나의 로직을 유지 하면서 바꿀 수 있는 방법이 있을까?

 

<2023-08-16 추가 내용>

 

state문제가 아니었다. 이는 서버에서와 브라우저 각각에서  styled-components의 해시값이 달라서 생기는 문제였다.

babel-plugin-styled-components를 설치하고 babelrc를 만들어 위와 같이 작성하면 문제가 해결된다.