Server Component에서 Css-in-JS 라이브러리 사용하기 (feat. panda-css)

next.js의 app router가 stable되면서 app 폴더 내부에 생성된 컴포넌트는 기본적으로 server component로 설정되었다. chakra ui를 사용하던 중에 이 문제를 격하게 실감하게 되었다. RSC를 지원하지 않기 때문에 모든 컴포넌트에 "use clinet"를 사용해야 했고, 이렇게 되면 RSC를 사용하지 못하게 되는 단점이 있었다. 이에 대해서 chakra ui 깃허브 이슈를 살펴보던 중, 서버 컴포넌트를 지원하는 새로운 라이브러리르 만들었다는 제작자의 코멘트를 보았다. 그것이 바로 panda css였다. https://panda-css.com/ Panda CSS - Build modern websites using build time and type-safe CSS-in-..