[TIL] Next.js + TypeScript 초기 세팅 #2 Styled-componet

 

◎ 지금 하는 프로젝트에 styled-component를 적용하기로 했다.

원래는 sass로 되어있는 프로젝트인데 styled-component로 바꿔서 해야 하는 큰 숙제가 있다.

현재 정리 내용은 처음 접하는 Next.js를 공부하면서 정리한 내용이다.

 

1. 설치

npm install --save styled-components

Javascript를 사용할 때는 위의 방식으로 설치하면 되지만, Typescript를 적용하면 styled-components를 인식하지 못한다.

그 이유는 Typescript에서는 리액트 라이브러리에 대한 type정의가 되어있지 않기 때문이다.

그렇기 때문에 type을 정의해 놓은 라이브러리도 설치해줘야 한다.

npm install --save @types/styled-components

 

2. Index.tsx 적용

◎ 원래의 코드를 styled-components를 사용하여 코드를 수정해보자.

 

Index.tsx

그리고 개발 서버를 다시 실행시켜 브라우저를 확인해보면 다음과 같이 뷰가 완성된다.

 

 

3. style 구조

◎ 보통 sass를 사용할 때처럼 reset.scss , theme.scss 와 같이 styled-components도 설정을 해줘야 한다.

이 설정 개발자마다 다를 수 있다는 점 참고하자.

├── styles
│   ├── global-styles.ts           # reset 또는 공통적으로 사용하는 css
│   ├── theme.ts                   # 공통적으로 사용할 테마(media query, color 등)
│   └── styled-components.ts       # 테마를 포함하여 재정의한 styled-components

 

4. .babelrc

◎ styled-components를 사용하다 보면 문자열 안에 스타일이 들어가기 때문에 처리를 위해 별도로 babel이 필요하다.

npm install --save-dev babel-plugin-styled-components

npm을 설치하고 루트 경로에 .babelrc 파일을 만들고 설정을 다음과 같이 한다.

 

.barbelrc

 

5. pages/_app.tsx

◎ 이제 styled-componets을 pages/_app.tsx에 전역적으로 설정한다.

이렇게 하면 reset, theme 설정한 css가 적용이 된 걸 확인할 수 있다.

 

_app.tsx

 

※ Next.js에서 styled-components를 사용하면 CSS 로딩이 늦게 되어 깜빡이는 현상이 발생한다.

HTML은 SSR로 미리 렌더링 시키지만 styled-components의 스타일들은 사용자가 접속 시 변환되기 때문이다.

그래서 _document.tsx 파일에 css를 미리 적용시켜야 한다.

 

6. pages/_document.tsx

◎ SSR에서도 styled-compoents를 사용하도록 설정한다.

_document.tsx 는 pages 폴더 내부에 존재하는 모든 페이지에 global 한 설정 값을 줄 수 있는 파일이다.

 

pages/_document.tsx

 

◎ 많은 삽질과 구글링을 통해 적용했는데 혹시나 틀린 부분이 있으면 댓글 부탁드립니다.

※ 참조

tlog.tammolo.com/blog/Next-js-SSR-Styled-component-feat-TS-c66fa617-64e0-4da6-bb01-5fb4dd7b2cf4/

Tlog

minhyeong-jang.github.io/doriri/2019/12/12/nextjs-sc-twinkling

Nextjs에서 styled-components 깜빡임 현상