Next.js 13에서 app router와 서버 컴포넌트를 사용하면서 CSS-in-JS 라이브러리를 적용하는 것이 가능한가요?

[hyjoong]

Next.js 12에서 pages router SSR 방식으로 페이지를 구현할 때 CSS-in-JS 라이브러리로 Styled-Components를 사용하여 스타일을 지정했습니다.

Next.js 13 및 Next.js 14 프로젝트에서는 서버 컴포넌트를 구현할 때 CSS-in-JS 라이브러리를 사용할 수 없을까요?

새로운 프로젝트에서 app router와 서버 컴포넌트를 구현한다면, 기존에 잘 활용하던 Styled-Components 라이브러리를 포기하고 다른 css 라이브러리를 도입해야 할까요 ?

공식 문서에 따르면 서버 컴포넌트에 스타일을 적용하기 위해선 CSS Modules나 Tailwind CSS를 사용하는 것이 권장된다고 나와 있네요.

공식문서: https://nextjs.org/docs/app/building-your-application/styling/css-in-js

[lledellebell]

Styled Components는 SSR을 지원하긴 하지만,
아래 Next.js의 공식 문서에서 설명하고 있듯이,
Next.js의 서버 컴포넌트 아키텍처와 CSS-in-JS의 작동 방식이 상충하기 때문에
현재 Next.js에서는 서버 컴포넌트와 함께 CSS-in-JS 라이브러리를 사용하는 것을 권장하지 않습니다.

서버 컴포넌트 구현할 때 Next.js에서 기본적으로 지원하는 CSS-in-JS 방식인 styled-jsx을 사용하는 것은 어떤가요?

References

• Styled Components, Server Side Rendering
• Next.js, CSS-in-JS
• Next.js, Styling Next.js with Styled JSX
• Stack Overflow, styled-components CSS are not applied in NextJS 13
• reddit, Can't style-components in Nextjs13 be used as server components?
• Careerly, Next.js13 스타일링 어떻게 하시나요?