개발자
next.js CSS라이브러리 선택
안녕하세요. 취업준비를 하며 사이드 프로젝트로 next.js를 공부중입니다. css-in-js 가 편해서 styled-component를 프로젝트에 활용해왔는데 최근 app router 방식 (13, 14) 에서는 아직 css-in-js 를 ssr 환경에서 지원하지 않지만 stylex는 가능하다는 말에 swc > babel 로 변경하고 stylex를 쓰던 중 문제가 발생하였습니다. 'use server' 코드에서는 async 만 export 가능한데 swc를 채택한 next.js 에서 babel을 고려하지 않아 async 를 못 알아보고 에러가 난다는 것입니다. ( 추측입니다... ) 결국 많은 경험이 도움이 될 것이라는 긍정적인 마인드와 함께 css-in-css 라이브러리를 배워보고자 합니다. 혹시 next.js 프로젝트를 진행중인 선배님들은 어떤 css라이브러리를 사용중이신가요?
답변 2
인기 답변
Next를 사용한다면 개인적으로 TailwindCSS 를 추천드립니다. 실제 공식 문서에서 기본 CSS 다음으로 Next에서 추천하는 방법이기도 합니다. App router랑 관계없이 해당 문제는 React Server Component 를 사용한 SSR 방식의 구조에서 발생하는 문제입니다. 그와 별개로 제가 알기로 최신 버전에서 css-in-js의 문제는 대부분 해결됬다는 소식을 언듯 봤는데 이 방법으로는 동작하지 않았는지 궁금합니다. https://github.com/vercel/next.js/tree/canary/examples/with-styled-components
세혁
작성자
삼성 청년 SW 아카데미 웹 개발 • 2024년 01월 18일
답변 감사드립니다! 해당 부분은 인지하고 있었는데 최신 next.js 에서 채택한 App router 방식이 아닌 Pages router 방식이라서 현재 공부 의도와 달라 일단은 사용을 지양하려 했습니다... 테일윈드의 bootstrap 같은 방식이 본인에게 어려워 현재는 바로 뒤에 말씀하신 next.js에서 추천하는 방법 중 하나인 module.css 로 프로젝트를 진행중입니다. 다시한번 답변 주셔서 정말 감사합니다!
module이 낫죠
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!