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

Warning : Props 'className' did not match
프로젝트를 시작하려다 보니 화면에 css로 적용한 스타일이 모두 사라지면서 이런 에러를 만났다.
스타일 컴포넌트를 사용했고, 첫 페이지는 렌더링이 잘 되는데 새로고침 이후에 이러한 문제가 발생했다.

왜 이런 에러가 발생할까?

첫 렌더링 페이지는 SSR로 작동한 뒤 이후에 CS로 화면을 렌더링한다.
이 때 서버에서 받은 해시+클래스명과 이후 클라이언트에서 작동하는 해시+클래스 명이 달라지기 때문에 스타일을 불러올 수 없다고 한다.

어떻게 해결할 수 있을까?

바벨 플로그인을 설치하고 바벨설정을 추가하면, 이 플러그인이 서버와 클라이언트의 클래스명을 일치시켜 주기 때문에 에러를 해결할 수 있다.

어떻게 클래스명을 일치시켜 준다는 거지?

이런 방식으로 앞에 코드가 포함된 파일명을 알려주고, 스타일 정보를 추가해 클래스 명을 생성한다.

전 : sc-17fsht8-0 cbfSeC
후: Header__Container-sc-17fsht8-0 kZvURD

1. 바벨 플러그인 설치

npm i babel-plugin-styled-components

2. .babelrc 설정

루트에 .babelrc파일 추가 후

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components",
      { "fileName": true, "displayName": true, "pure": true }
    ]
  ]
}

Reference

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