NextJS에서 구글 폰트 적용 시 구문 오류

Problem

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

 

Reason 🤔

https://github.com/mui/material-ui/issues/35673

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

NextJS 13을 사용하는 경우 @next/fonts는 SWC를 사용하여 컴파일하므로 babel 대신 swc를 구성해야 한다. https://swc.rs/docs/getting-started

Getting Started – SWC

 

Try to solve

• NextJS는 프로젝트가 .babelrc 파일을 가지고 있는 경우 babel을 사용하고 그렇지 않은 경우 swc를 사용한다.
• .babelrc 파일을 프로젝트에서 삭제하고 next.config.js에 필요한 설정을 추가한다.

const nextConfig = {
  swcMinify: true,
  compiler: {
    styledComponents: true,
  },
};

module.exports = nextConfig;