NextJS (4) Styled-components

스타일드컴포넌트, CSS, CSS-in-JS

◎ Styled-components  : CSS-in-JS의 대표적 라이브러리. styled-jsx와 유사하지만 기능이 더 많음. styled-jsx는 넥스트에서 기본지원해 별도 설정 필요없으나, Styled-components는 설정 필요

◼︎ 설치

$ npm i styped-components
$ npm i -D @types/styled-components

- 스타일드컴포넌트로 SSR 지원하기 : _document.tsx 설정(작성), .babelrc 바벨 설정

- 스타일드컴포넌트로 글로벌 스타일 적용하기 : styles/GlobalStyle.ts 작성, _app.tsx 작성

- 글로벌 스타일 설정하기 : styled-reset 사용 

$ npm i stytled-reset

◼︎ 폰트 적용

- _document.tsx 파일 내에 <link> 태그를 이용하여 구글폰트 CDN 삽입

- styles/GlobalStyle.ts에 font-family 속성에 위 폰트 적용