TIL[005] 21.03.13

Bewell·2021년 3월 14일
0

TIL

목록 보기
5/6

styled-components 초기 오류

styled-components 를 설치하고 사용하면 초기에 겪을 수 있는 오류이다.
내용은 서버의 sdkfjasld 클래스명이 클라이언트의 sdfkasdf 클래스명과 다르다 라는 내용이다.
원인은 next js에서 최초 페이지 렌더링시 SSR(서버사이드 렌더링)이고, 이후에는 CSR(클라이언트사이드 렌더링)이기 때문에 서버에서의 클래스명과 클라이언트에서의 클래스명이 달라서 생기는 오류이다.

이를 해결하기 위해서는 바벨의 도움을 받아야한다.

1. 바벨 플러그인 설치
$ npm i babel-plugin-styled-components

2. .babelrc파일 생성

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": ["babel-plugin-styled-components"]
}

0개의 댓글