Next.js13 스타일링 어떻게 하시나요?

백수의 의견이라 틀릴 수 있습니다. 훌륭하신 분들이 틀린 부분에 대해 지적해주시면 감사하겠습니다. 특정 CSS-in-JS 라이브러리가 Next 13이 아니라 React 18를 지원하는지가 더 중요합니다. 리액트 진영이 서버 컴포넌트, 동시성 렌더링과 함께 새로운 패러다임으로 넘어왔지만 많은 CSS-in-JS 라이브러리들은 서버 컴포넌트를 제대로 지원하고 있지 않은 것이 가장 큰 문제입니다. 참고로 tailwindcss 는 CSS-in-JS 가 아니기 때문에 이런 이슈에 더 자유롭습니다. 언젠가 styled-components, emotion 가 RSC 를 완벽 지원하는 날이 올 수도 있겠습니다만, 이 라이브러리들은 태생부터 런타임에 스타일을 생성하는 매커니즘을 가지고 있기 때문에 기존의 매커니즘을 바꾸지 않는다면 자잘한 이슈에 자유로울 수 없을 것이라 추측합니다. 대안은 css module, tailwindcss를 사용하시거나, RSC를 지원하는 제로 런타임 CSS-in-JS를 사용하는 것입니다. - pandacss (chakra team) - vanilla-extract 이 두 라이브러리는 stitches와 tailwind에 많은 영감을 받아 제작되었습니다. (그들에게 훌륭한 영감을 남긴 뒤, stitches는 운명하셨습니다.)

답변 드립니다. 정답은 없고 개인적인 의견이니 참고만 해주시면 될것 같습니다. 또한 styled-components에서 어떠한 문제점을 겪고 계신지 명확한 명시가 없어 일반적인 답변 밖에 드릴 수 없을것 같습니다. 1. Next.js에서 styled-components(CSS-in-JS) 말고 다른 스타일링 대안은 무엇인가요? 질문으로 봤을때 현재 Next.js에서 CSS-in-JS 형태로 스타일링을 진행하고 계신다고 판단됩니다. CSS-in-JS는 컴포넌트 단위의 스타일링과 동적 스타일링을 가능하게 해주지만, 성능 이슈, 빌드 시간 증가, 코드 분리의 어려움 등의 단점을 가지고 있어요. 이러한 CSS-in-JS의 한계를 고려하여 다른 스타일링 대안을 찾고 계시다면, utility-first CSS 프레임워크인 Tailwind CSS를 추천드립니다. Tailwind CSS 또한 완벽하지 않지만 재사용 가능한 작은 유틸리티 클래스를 제공하여, 디자인의 일관성 유지와 코드 재사용성을 향상시키며, 사용자 정의를 쉽게 할 수 있도록 도와줍니다. 하지만 HTML에서 많은 클래스를 사용하면 가독성이 떨어질 수 있으며, 새로운 학습 곡선이 필요하다는 단점도 있어요. 또한 요즘 많이 사용하고 있어서 참고할 만한 글도 많습니다. 완벽한 방법은 없는것 같습니다. 다만 목적에 맞게 다양한 스타일링 방법을 공부하고 적절히 섞어서 쓸수 있어야 하는것 같네요. 만약 Tailwindcss 사용해보시지 않으셨다면 한번 사용해보시는것을 추천드려요. 2. 현업에서 Next.js 13 버전으로 마이그레이션하고 있는가요? Next.js 13은 향상된 성능과 새로운 기능을 제공하기 때문에, 많은 개발자들이 이 버전으로의 마이그레이션을 고려할것으로 판단하고 있어요. 그러나, 현업 환경에서는 새로운 버전으로의 마이그레이션에 신중해야 한다고 생각해요. 새로운 기능과 향상된 성능이 매력적일지라도, 기존에 제공하던 서비스의 안정성과 고객에게 전달되는 가치를 우선시 해야 하니까요. 또한, 마이그레이션 과정에서 생길 수 있는 다양한 비용(예: 추가 작업, 테스트 비용 등)을 고려해야 해서 쉽게 결정하기는 어려운 문제일것 같네요. 따라서, Next.js 13으로의 마이그레이션 여부는 팀의 상황, 프로젝트의 요구사항과 우선순위, 그리고 마이그레이션으로 인한 비용 등을 종합적으로 고려한 후에 결정해야 해야할것 같아요. 저희같은 경우 마이그레이션은 하지 않고 신규 프로젝트의 경우만 13으로 진행하고 있습니다.

안녕하세요! 우선 스타일 부분의 경우 저희는 tailwindcss를 사용하고 있습니다. "현업에서 Next 13 마이그레이션 하는 분위기인가요?" 이건 필요하면 하자의 기조는 있는데 아직 필요성을 못 느끼고 있습니다. 그리고 next13으로 올린다고 해도 app 디렉토리는 변경 사항이 너무 많아서 pages 디렉토리를 그대로 사용할 것 같습니다. 그래도 언제가는 할 수 있지 않을까 싶네요 ㅎㅎ 개인적으로 아직 app 디렉토리가 과도기인것 같아서 마이그레이션을 해도 아주 천천히 할 것 같습니다. 기존에 pages에서 잘되던 것들이 안되는것도 많은것 같고, 다른 라이브러리들과 호환성 이슈도 조금씩 있는것 같더라구요. 레딧이나 깃허브 이슈 등 app 디렉토리를 먼저 도입한 분들의 후기를 참고해보시면 좋을 것 같아요 :)

저도 스타일컴포넌트를 사용하고 있습니다 초기설정에 많은 시련이 있엇는데 현재 픽스하여 문제없이 사용중입니다!

NextJS13 버전 공식문서에서는 13버전의 메인컨셉인 서버컴포넌트방식을 사용하기 위해서는 css-in-js방식을 사용할 수 없고 tailwindcss, postcss를 사용할 것을 권하고 있습니다. css-in-js를 사용한다면 클라이언트 컴포넌트로 사용해야 될 것 같네요 저는 서버컴포넌트가 NextJS13의 변경점 중 가장 크다고 생각해서 css-in-js가 아닌 테일윈드로 스타일링해서 개발합니다