Emotion을 Next.js에서 사용할 때 환경 설정

최근에 과제를 진행하며 css in js 만을 이용해서 직접 스타일링을 하다 emotion을 선택했는데,
document에 나와있는 install 절차를 진행했음에도 콘솔창에

You have tried to stringify object returned fromcssfunction. It isn't supposed to be used directly (e.g. as value of theclassNameprop), but rather handed to emotion so it can handle it (e.g. as value ofcssprop).

에러와 함께 div css="\[object Object\]"></div> 와 같이 렌더링이 되었다.

 

Babel 문서에는 아래와 같이 설정하면 해결할 수 있다. 매 파일마다 설정하고 싶다면 아래처럼 하면 되고

/** @jsxImportSource @emotion/react */
import { jsx, css } from '@emotion/react'

 

이 아래에는 전체 프로젝트에 적용하는 방법이다. Next.js에서는 아래와 같이 바벨을 설정하면 해결된다.

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

Next.js가 아니고 .babelrc를 수정한다면, 아래와 같이 설정하면 된다.

{
  "presets": [
    ["@babel/preset-react", { "runtime": "automatic", "importSource": "@emotion/react" }]
  ],
  "plugins": ["@emotion/babel-plugin"]
}