[Nextjs] Emotion.js - Prop className did not match (부제: Babel 설정)

emotion.js는 styled-components처럼 브라우저에서 열었을 때(처음) className을 임의로 생성(SSR)해주는데 이후 CSR로 화면을 렌더링하게 되면 이때 서버에서 받은 클래스명과 이후 클라이언트에서 작동하는 클래스 명이 달라지면서 스타일을 불러올수 없는 문제가 발생한다고 한다.

난 next도 emotion 도 둘다 초보였기 때무네.. 눈물의 구글링을 반복하다가 바벨 설정을 이렇게 해줬다.

 

1. 바벨 플러그인 설치

yarn add babel-plugin-module-resolver @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

 

2. .babelrc 작성

{
    "presets": ["next/babel"],
    "plugins": [
      [
        "@emotion",{
          // sourceMap is on by default but source maps are dead code eliminated in production
          "sourceMap": true,
          "autoLabel": "dev-only",
          "labelFormat": "[local]",
          "cssPropOptimization": true
        }
      ],
      [
        "module-resolver",
        {
          "root": ["."],
          "extensions": [".js", ".ts", ".tsx"]
        }
      ]
    ]
}