❗ Error Log

styled component 세팅

알게 된 내용

styled component를 쓸 때 babel을 설정하지 말고 swc를 사용하는 게 좋다!

// Type Error 발생

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

당신이 보고 있는 메시지는 Next.js의 next/font 기능이 SWC(Speedy Web Compiler)를 필요로 하지만, 현재 프로젝트가 사용자 정의 Babel 구성이 존재하기 때문에 Babel을 사용하고 있다는 것을 나타냅니다. 이 상황은 Next.js 프로젝트에서, 특히 SWC와 함께 작동하도록 설계된 새로운 기능이나 최적화를 사용하려고 할 때 발생할 수 있습니다.

여기에 조금 더 상황을 설명하고 가능한 해결책을 제시해 드리겠습니다:

Next.js에서의 SWC: Next.js는 더 나은 성능과 빠른 빌드를 위해 SWC(러스트 기반의 초고속 컴파일러) 사용으로 전환하고 있습니다. Next.js의 최신 기능과 최적화 중 많은 부분이 SWC를 활용하도록 만들어져 있습니다.

Babel 구성: 프로젝트에 사용자 정의 Babel 구성(.babelrc 파일이나 babel.config.js에서 정의)이 있는 경우, Next.js는 SWC 대신 Babel을 사용하여 JavaScript 및 TypeScript 코드를 컴파일합니다.

Babel과 next/font 사용: 당신의 메시지 기준으로 next/font 기능은 구체적으로 SWC를 필요로 하며, Babel과 함께 작동하지 않습니다. 이는 next/font가 SWC에 특화된 기능을 사용하기 때문에 그럴 수 있습니다.

해결책:

SWC로 전환: 가능하다면, SWC로 전환하여 next/font와 같은 최신 기능을 사용하는 것이 좋습니다. 이를 위해, 사용자 정의 Babel 설정을 제거하거나 수정할 수 있습니다. 대안 사용: next/font 기능이 필수적이지 않다면, 다른 방법을 사용하여 폰트를 로드할 수 있습니다. 예를 들어, CSS 또는 전통적인 태그를 통해 폰트를 추가할 수 있습니다. SWC로 전환하는 것은 성능과 빌드 속도를 향상시킬 뿐만 아니라, Next.js의 최신 기능을 최대한 활용할 수 있게 해줍니다.

참고하면 좋은 자료들

https://velog.io/@whwodlf90/Error-nextfont-requires-SWC-although-Babel-is-being-used-due-to-a-custom-babel-config-being-present