[Next.js] Props `className` did not match.

Warning: Prop `className` did not match. Server: "sc-gKclnd ctBXSH" Client: "sc-dkPtRN hSjZFd"

 

Next.js로 Styled-components 사용하면, 최초 빌드하여 랜더링은 문제 없이 잘 되는데, 몇번 새로고침을 하면 위와같은 에러가 발생할 때가 있다.

 

Next는 처음 페이지는 SSR(서버사이드 랜더링)으로 작동하고 이후는 CSR(클라이언트 사이드 렌더링)으로 작용하기 때문에, 서버에서 받은 해시 클래스명과 이후 클라이언트에서 작동하는 해시클래스명이 달라져서 스타일을 적용하지 못하는 현상이다.

 

[최초 랜더링] : 정상 작동

 

[n번 새로고침 시] : Warning과 함께 스타일 적용 안됨

 

해결방안

바벨 플러그인을 설치하고 바벨 설정을 해주면 해결 할 수 있다.

이 플러그인은 서버와 클라이언트의 클래스명을 일치 시켜주는 역할을 한다.

 

1. 바벨 플러그인 설치

npm i babel-plugin-styled-components

 

2. 프로젝트 루트 파일에 .bablerc 파일 신규 생성

 

3. .babelrc 파일 설정

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

* 인덱스 옵션 설명

 { "fileName": true, "displayName": true, "pure": true }

• fileName: 코드가 포함된 파일명을 알려줌
• displayName : 클래스명에 해당 스타일 정보 추가
• pure : 사용하지 않은 속성 제거

 

 

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

Styled-components # nextjs에서 className 오류