Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Archives
Today
Total
관리 메뉴

kohigowild

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

React/NextJS

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

kohi ☕ 2023. 3. 16. 01:27

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

Duplicates I have searched the existing issues Latest version I have tested the latest version Steps to reproduce 🕹 Link to live example: Steps: Open the example on this page in StackBlitz: Current...

github.com

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

 

Getting Started – SWC

Getting Started Installation The easiest way to try SWC is using the Playground. Otherwise, run the following to download pre-built binaries: pnpm i -D @swc/cli @swc/core Then, you can transpile your first file and emit to stdout: Supported Binaries SWC ca

swc.rs

 

Try to solve

  • NextJS는 프로젝트가 .babelrc 파일을 가지고 있는 경우 babel을 사용하고 그렇지 않은 경우 swc를 사용한다.
  • .babelrc 파일을 프로젝트에서 삭제하고 next.config.js에 필요한 설정을 추가한다.
const nextConfig = {
  swcMinify: true,
  compiler: {
    styledComponents: true,
  },
};

module.exports = nextConfig;

 

'React > NextJS' 카테고리의 다른 글

Embla Carousel 사용법 정리 (Feat. Next.js)  (0) 2023.04.14
빌드 시 정적(static) 이미지가 누락되는 문제  (0) 2023.03.18
'React/NextJS' Related Articles more