TIL: styled-components와 Next.js를 함께 쓰면 발생하는 문제 - 220628

Lumpen·2022년 6월 28일
0

styled-components

매 렌더링 시 마다 className을 랜덤하게 새로 부여

Next.js와 만나면 같은 컴포넌트인데 클래스명이 다르다는 경고 발생

Props 'className' did not match Server

해결

  1. client에 바벨 플러그인 설치
npm i babel-plugin-styled-components
  1. node_modules와 같은 레벨에 .babelrc 폴더 생성 후 설정 추가
{
  "presets": ["next/babel"],
  "plugins": ["babel-plugin-styled-components"]
}
profile
떠돌이 생활을 하는. 실업자는 아니지만, 부랑 생활을 하는

0개의 댓글