next에서 styled-components로 스타일을 적용하고, 개발서버를 실행시키니 첫 화면은 정상적으로 로딩되다가 새로고침 이후 다음과 같은 에러 메시지가 발생하면서 적용된 스타일이 모두 사라져버렸습니다 🤦🏻♀️ ( 아니 이건 또 무슨 새로운 에러인가... )
Warning: Prop `className` did not match. Server : "~~~" Client : "~~~~" 라는 경고 메시지와 함께 화면 스타일도 모두 증발..! ⚠️
구글링으로 검색해보니 저와 비슷한 사례가 몇가지가 있더라구요!
" 첫 페이지는 SSR로 작동하며 이후 CSR로 화면을 렌저링하게 되는데, 이때 서버에서 받은 해시+클래스명과 이후 클라이언트에서 작동하는 해시+클래스 명이 달라지면서 스타일을 불러 올 수 없는 문제가 발생한다. " 라는 명쾌한 원인을 얻었어요 🚀
이때 우리는 바벨 플러그인을 설치하고, 바벨 설정을 추가함으로 해결 할 수 있습니다.
npm i babel-plugin-styled-components
> npm i babel-plugin-styled-components( 바벨 플러그인은 서버와 클라이언트의 클래스명을 일치 시켜줌으로 문제를 해결해주는 방법이랍니다 )
.babelrc 설정
// .babelrc
{
"presets": ["next/babel"],
"plugins": ["babel-plugin-styled-components"]
}프로젝트 루트에 .babelrc 파일을 추가하고 위와 같이 작성해줍니다. next.js에서 바벨 설정을 추가할 때 꼭 next/babel 프리셋을 항상 추가해야 함을 잊지 말아주세요!!
서버를 다시 실행해보면 경고창과 함께 스타일도 정상적으로 잘 적용되서 나온답니다 🌈
추가옵션
{
"presets": ["next/babel"],
"plugins": [
[
"babel-plugin-styled-components",
{ "fileName": true, "displayName": true, "pure": true }
]
]
}- fileName: 코드가 포함된 파일명을 알려준다.
- displayName: 클래스명에 해당 스타일 정보 추가
- pure: 사용하지 않은 속성 제가
추가 옵션을 적용 후 클래스명이 깔끔하게 변경되고, 개발모드는 자동 true 설정됩니다.
참고) velog.io/@hwang-eunji/Styled-components-nextjs%EC%97%90%EC%84%9C-className-%EC%98%A4%EB%A5%98