Next.js호환 CSS 관련 문의
787
投稿した質問数 7
안녕하세요. 제로초님. 질문 많이 드려서 죄송합니다.
아마 마지막 질문이 될 것 같아요.
강의에서 CSS-in-JS 라이브러리와 Next의 호환성 문제를 언급해주셨음에도 불구하고, styled-componets로 진행을 하다가 문제점을 깨닫고 멈춘 상태입니다.
제가 꾸역꾸역 styled-componets 써보려고 한 이유는 다음과 같았습니다.
프로젝트를 마이그레이션 하는 과정에서 라이브러리를 바꾸게 됐을 때의 비용이 너무 많이 발생한다고 판단함.
Next에도 babel, swc 등의 설정 파일을 추가 하면 사용할 수 있다는 글들이 구글링에 많이 보였기 때문에, '이제 업데이트 돼서 가능한가?' 싶었음.
하지만 결론적으로 layout.tsx, page.tsx 파일에도 스타일이 들어가지 않을 수 없었고, use client로 떡칠된 프로젝트가 되어서 next.js를 사용하는 의미를 잃었습니다.
서론이 길었습니다. 위와 같은 이유로 아래 내용 질문드립니다.
styled-component가 된다고 우기는 블로그들은 다 ssr의 이점을 버리고 사용중인 거라고 보면될까요?
채용공고에서 next와 styled-component를 동시에 요구하는 공고는 두 개를 같이 쓰고 있는 곳일까요?
현실적으로 next와 함께 쓰일만한 라이브러리는 유명한 라이브러리 중에서 postCSS, SASS 가 전부인가요?
回答 3
2
애초에 css를 굳이 필수적으로 ssr 할 필요가 없으니 그냥 쓰는 겁니다. ssr의 목적으로 SEO만을 생각하는 경우에는 css는 그냥 포기하는 거죠.
next-app-router를 쓰는 곳보다 next-page-router를 쓰는 회사가 더 많습니다. page-router는 styled-components도 ssr 되니까요.
vanilla-extract나 tailwind가 제일 현실적인 것 같네요.
next-app-router는 실무에 적용하기 아직 이릅니다. 대부분의 회사가 page router에서 안 넘어가고 있는 이유가 있어요.
0
안녕하세요, 인프런 AI 인턴입니다.
화해방님의 질문에 관하여 styled-components와 Next.js의 사용에 대한 이전 질문들과 강사님의 답변을 찾아보았습니다. 다음 내용들이 도움이 될 것 같습니다.
- “안녕하세요 아직 수강중이긴한데 실무에서 작업중 궁금한게 있어서 질문드립니다!” 중에서 styled-components와 Next.js의 사용법에 대한 답변: Next + React Query로 SNS 서비스 만들기 - Next.js와 styled-component 문제 해결 방법 관련 질문
- “css관련 질문이 있습니다.” 중에서 styled-components의 사용 이유에 대한 답변: React로 NodeBird SNS 만들기 - styled-components 선호 이유 질문
위 링크들에서 강사님의 답변을 확인하시면 궁금증을 해결하는 데 도움이 될 것입니다.
캡처링부분 질문있습니다.
0
73
2
깃에 소스코드를 찾을 수 없습니다.
0
112
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
97
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
108
2
css 라이브러리 추천 부탁드립니다
0
140
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
130
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
118
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
169
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
108
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
83
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
124
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
101
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
65
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
131
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
97
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
84
2
vanilla-extract 못찾는 문제
0
227
2
fetch 캐싱과 revalidate 관련
0
84
2