[Next.js] Warning : Props 'className' did not match Server: ' ' Client: ' '

문제상황

 

Warning : Props 'className' did not match Server: ' ' Client: ' '

 

Next.js 로 styled-components로 스타일을 적용한뒤에 난 오류!

이 오류는 Server 의 클래스와 Client의 클래스가 달라서 match 가 안된다는 것.

 

Next.js는  첫  화면은 SSR(서버사이드렌더링)을 한 후에 뒤에 부분적으로 CSR(클라이언트 사이드 렌더링)을 하게 되는데

이때 서버와 클라이언트의 클래스가 달라서 생기게 된 오류이다.

 

실제로 Element를 확인하면 class= 'login_LoginDiv-sc-v...."로 되어있는데

서버에서는 class= "sc-v,,...."로 되어 있어 매치가 되지 않는다.

 

 

---

해결 방법

바벨의  설정을 변경해주면 된다.

 

바벨 설치가 아직 안되었다면,

1) 바벨 설치

npm i babel-plugin-styled-components

 

2) 루트디렉토리에 babelrc 생성 (node_modules랑 같은 레벨에)

 

babelrc

displayName	디버깅이 쉽도록 class에 스타일 정보 자동 추가
ssr	서버사이드 렌더링

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}

 

 

 

 

 

 

 

참고: 

https://velog.io/@hwang-eunji/Styled-components-nextjs%EC%97%90%EC%84%9C-className-%EC%98%A4%EB%A5%98

https://styled-components.com/docs/advanced#nextjs

 

styled-components: Advanced Usage