[Next.js, Nextra] @next/font 패키지 경고 해결

Next.js, Nextra에서 @next/font 패키지 경고 해결

---

1. Next.js, Nextra에서 font관련하여 아래와 같은 경고문이 발생

⚠ Your project has `@next/font` installed as a dependency, please use the built-in `next/font` instead. The `@next/font` package will be removed in Next.js 14. You can migrate by running `pnpm dlx @next/codemod@latest built-in-next-font .`. Read more: https://nextjs.org/docs/messages/built-in-next-font

 

2. 이 경고는 @next/font 패키지를 사용하는 대신 next/font를 사용하라는 내용

3. 이를 해결하기 위해 Next.js의 코드 모드(codemod)를 사용하여 자동으로 마이그레이션이 가능

 

해결 방법

1. 마이그레이션 실행

pnpm dlx @next/codemod@latest built-in-next-font .

 

2. @next/font 패키지 제거

pnpm remove @next/font

 

3. 코드 수정

프로젝트 코드에서 @next/font 대신 next/font를 사용하도록 수정