개발자
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이 낫죠
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 01월 13일
next.js 프로젝트에서 사용하는 CSS 라이브러리 선택은 전적으로 당신의 개인적인 취향, 프로젝트 요구사항, 그리고 팀과의 호환성에 따라 달라질 수 있습니다. 그러나, next.js와 함께 사람들이 많이 사용하는 몇 가지 CSS-in-JS 라이브러리들을 추천해 드릴 수 있습니다: 1. **Styled Components**: 이는 JavaScript 안에 CSS를 작성할 수 있는 CSS-in-JS 라이브러리입니다. 설계된 컴포넌트를 재사용하고 유지 관리하기 쉽습니다. 2. **Emotion**: Emotion은 Styled Components에 비슷한 API를 가진 또 다른 인기있는 CSS-in-JS 솔루션입니다. Emotion은 성능에 중점을 두고 있으며, 여러분의 스타일을 별도의 파일로 추출할 수 있는 기능을 제공합니다. 3. **Tailwind CSS**: 태일윈드CSS는 고수준(업무 수준)의 유틸리티 커스터마이징 도구입니다. 클래스 이름만으로 웹디자인을 완성 할 수 있으며, 파일 사이즈가 작아서 많이 사용됩니다. 위 세가지 방식 외에도 다양한 솔루션이 있으니 가장 적합한 것을 선택하시면 됩니다. next.js는 css과 scss를 기본적으로 지원하며, CSS Modules 방식으로 스타일을 작성할 수 있습니다. 또한 PostCSS를 내장하고 있어서 Autoprefixer 같은 플러그인을 쉽게 연동할 수 있습니다. 하기 단계로 styled-components 사용법이 포함된 Next.js 설정 가이드가 있습니다: 1. 프로젝트 생성 2. Styled Components 설치 3. .babelrc 파일 생성 및 설정 다음 문서에서 자세한 정보와 예제 코드를 참고하세요: https://nextjs.org/docs/basic-features/built-in-css-support 답변에 도움이 되었기를 바랍니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!