[Next] next14 app router과 emotion은 최악의 궁합인가.

next 프로젝트를 만들면서 emotion을 사용해보기로 했다.

css-in-js가 가능하고 styled-component 형식으로 css 짤 수 있다는 것이 장점이다.

특히 토스에서 emotion을 사용한다고 하기에 나도 당장 써보기로 했다.

 

그런데... 뭔가 이상하다

6시간째 에러만 해결하고 있다.

next 13 부터는 app router 방식이 사용되는데

아직 emotion의 app router 방식에 대한 SSR 지원이 제한되어 있기 때문에

client 컴포넌트로 밖에 사용하지 못하는 것 같다. (근데 이럼 next 쓸 이유가...)

 

emotion은 css-in-js 라이브러리인데

이 동작방식이 SSR 동작 방식과 상충되는 부분이 있기 때문이다. (하이드레이션 이슈)

 

결론 : tailwind css나 쓰자