프론트엔드 개발

Next js에서 styled-component를 이용하려면 몇 가지 설정이 필요하다. Next js와 styled-components 가 설치되어 있다고 가정한다. 문제점 첫 화면에서, css가 의도치 않게 적용되는 모습을 볼 수 있다. styled-components이 기존 csr처럼 작동되기 때문에 발생되는 문제인데, 이를 해결하려면 ssr을 적용을 해야 한다. 해결방법 1. babel-plugin-styled-components 설치 yarn add -D babel-plugin-styled-components npm i -D babel-plugin-styled-components 2. 해당 프로젝트 root 바로 밑에 .babelrc를 만든다. { "presets": ["next/babel"], ..