Next.js 14에서 localFont를 사용할 때, 폰트 파일 경로를 절대 경로(@ 별칭)로 지정했을 때 경로를 인식하지 못하는 문제가 발생했습니다.

const pretendardRegular = localFont({
  src: '@/public/assets/fonts/Pretendard-Regular.woff',
  weight: '400',
  display: 'swap',
});

Module not found: Can't resolve './@/public/assets/fonts/Pretendard-Regular.woff'

localFont 함수는 상대 경로로 폰트를 지정해야만 정상적으로 작동하는 것 같습니다. Next.js 공식 문서에서 폰트 파일 경로는 localFont 함수가 호출되는 디렉토리를 기준으로 상대 경로로 작성해야 한다고 이해했습니다.

경로가 src: '../../public/assets/fonts/Pretendard-Regular.woff'로 설정된 이유는 /src/app/layout.tsx 파일의 위치를 기준으로 폰트 파일을 찾기 때문입니다.

이 점을 고려하여, 절대 경로(@ 별칭)를 사용하는 것은 지원되지 않으며, 상대 경로를 사용하는 것이 유일한 방법으로 보입니다.

참고자료