에러문구

"next/font" requires SWC although Babel is being used due to a custom babel config being present.

왜?

Next.js 12 버전에서는 SWC를 사용하면서, 이전에 emotion을 사용하기 위한 플러그인 없이 SWC 컴파일러로 대체할 수 있다.

해결 방법

next.config.js인 경우

next.config.js를 아래와 같이 수정한다.

module.exports = {
  compiler: {
    emotion: true,
  },
}

next.config.mjs인 경우

next.config.js를 아래와 같이 수정한다.

const config = {
  //생략
  compiler: {
    emotion: true,
  },
};

조금 더 복잡한 설정을 원하는 경우

공식문서를 참고한다

후기

이러한 에러가 등장할 때마다 느끼는 생각...
더 편해지기 위해 새로운 도구가 지속적으로 등장하지만, 이것을 제대로 활용하느냐 기술 부채로 남겨두느냐는 온전히 개개인의 몫임을 절실히 느낀다.

아자아자 화이자...💉