next/font와 styled-components를 함께 사용하려면...

Next JS에서 styled-components를 사용하기 위해 .barbelrc을 생성하고 next/font를 사용하려고 하니 아래와 같은 에러가 발생했다.

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

대충 Babel 대신 SWC를 쓰라는 소리...
SWC가 뭔데

SWC?

• Speedy Web Compiler
• JavaScript 프로젝트의 컴파일과 번들링 모두에 사용될 수 있는, Rust로 제작된 빌드 툴.
• SWC에서 제공하는 컴파일러 기능이 Next.js에서 기존 빌드에 활용하던 바벨과 Terser를 대체한다.
• 바벨이나 Terser보다 매우 빠르다

SWC 사용하기

• Next.js 12 버전부터는 기본적으로 SWC 컴파일러가 바벨을 대체하도록 설정되어 있다. 아래 명령어로 프로젝트를 생성하면 자동으로 빌드 시 SWC 컴파일러가 사용된다.

npx create-next-app@latest 프로젝트명

• but Terser의 코드 경량화 작업도 SWC가 담당하도록 하려면 별도의 설정이 필요하다.

코드 경량화(Minification) 적용하기

next.config.js

module.exports = {
  swcMinify: true,
};

.babelrc 파일 삭제하기

• 나는 styled-components 관련 설정을 하며 .babelrc 파일을 생성해 babel을 사용 중이었기 때문에 babel 대신 SWC를 사용하기 위해 .babelrc 파일을 삭제해주었다.
• 함께 설치했었던 babel-plugin-styled-components도 삭제해준다.

styled-components 적용하기

• styled-components 사용을 위해 babel에서 설정하던 부분을 SWC에서 설정한다.
  (SSR에 의해 styled-components 스타일 적용 전에 화면 렌더링 되는 문제를 방지하기 위한 설정)

next.config.js

module.exports = {
  swcMinify: true,
  compiler: {
	styledComponents: true,
  }
};

---

🌟 참고 : Next.js 12 이후 버전에서 SWC 대신 babel 사용하기

• 프로젝트에 커스텀 바벨 설정 파일인 .babelrc 파일이 존재하기만 하면 된다.

.babelrc

{
    "presets": ["next/babel"] // Next.js 프로젝트 빌드를 위한 플러그인들이 모여있는 프리셋
}

• next.config.js에서 SWC 관련 설정(swcMinify: true 등)을 해준 상태라면 삭제해준다.

---

레퍼런스

• 초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC
• [Kasra Khosravi] Why you should use SWC (and not Babel) 한글 번역
• Next JS가 Babel을 SWC로 대체한 이유
• NextJS-Babel에서-SWC로-이사가기