개발자
안녕하세요. 오늘도 Next의 심오함에 허우적대고 있는 주니어 프론트엔더 입니다. Next 에서 디자인관련 프레임워크와 라이브러리로 Ant-Design 과 Styled-components를 선택하여 프로젝트를 진행하는 중입니다. 그리고 방식은 기본 Antd의 컴포넌트를 import 하여 필요 부분만 Styled-components로 덮어 커스텀하는 방안으로 택하였습니다. 이전에 Next는 기본적으로 서버에서 html을 생성하려는 경향이 있기에 css-in-js는 가끔가다 hydrating 과정으로 인해 스타일이 적용되지 않는 부분만 먼저 보여진다고 들었습니다. 그래서 현재 next 13을 사용하고 있어 (app routing 방식이 아닌 구 버전인 pages routing 방식을 사용하고 있습니다.) next.config.js에서 styled-components를 인식하게 도와주는 설정 코드를 작성하였습니다. - 해당 설정은 최하단에 첨부하였습니다. 문제는 FOUC 관련 이슈가 일부 컴포넌트에만 나타납니다. Button컴포넌트와 Input컴포넌트를 위와 같은 스타일 방식으로 제작을 하였는데, 페이지가 리프레쉬가 되면 Button 컴포넌트는 기존 styled-components의 커스텀을 유지하지만, Input 컴포넌트는 styled-comopents의 커스텀을 입히기 전의 Ant-Design의 기본 디자인으로 렌더링되는 문제가 발생하였습니다. 그래서 제가 진행했던 FOUC 관련 설정에 문제가 있는지 궁금하여 질문을 드리려고 합니다!
1/* next.config.js */
2
3const nextConfig = {
4 reactStrictMode: true,
5
6 /* css-in-js FOUC 문제 해결 */
7 compiler: {
8 styledComponents: true
9 },
답변 1
안녕하세요! Next.js13 버전이지만 app라우팅이 아니라면 _document.js 가 있으실까요? 그렇다면 아래 링크방법을 참고해보시면 좋을것 같습니다~ - https://handhand.tistory.com/291 혹은 app라우팅이라면 저도 해보진 않았지만 관련글 있어서 같이 링크 첨부 드립니다! - https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components - https://jha-memo.tistory.com/99
이상원
작성자
Frontend Dev • 2023년 08월 03일
아 안그래도 document파일 이 글을 올리고 바로 확인하여서 구성하였습니다 ㅎㅎ. 답변감사해요!!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!