Next js 전역적으로 폰트 적용하기, 간단한 프로젝트 구조 만들기

자 이번 프로젝트 구조는 아직 실제 프로젝트가 아니기 때문에 간단하게 구성을 해봤습니다! 

폴더	역할
assets	이미지, css 파일, 폰트 파일 등은 모두 assets 폴더에 저장한다. 코딩과 관련 없는 모든 파일을 이 폴더에 보관한다.  public
components	전체 애플리케이션에서 공통으로 사용되는 컴포넌트 요소 저장
lib	axios 등 추가로 사용되는 리액트 플러그인 등을 저장
pages	서브 페이지 저장

 

폰트 설정

1. 폰트 다운로드
2. nextjs 폰트 전용 함수 호출
3. 적용할 요소에 할당

자 이제 폰트를 설정해보겠습니다! 폰트 같은 경우 위의 폴더 구조에 따르면 assets > fonts에 저장하면 되겠죠~
폰트는 PretendardVariable.woff2를 사용해보겠습니다!

next js에서는 폴드를 적용하기 위해 전용 함수를 호출하면 된다고 하는데, page.js 안에서 호출하는 것과
layout.js에서 호출하는 거에 따라 preloading에 차이가 있다고 합니다. preloading이란 폰트 같은 자산을
웹이 보여지기 전 미리 로드하여 리소스를 절약하고 성능에 좋은 영향을 준다고 하네요!

전역적으로 사용을 해야하니 root layout에다가 설정해주겠습니다. 공식 문서 참고했어요.
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts

잘 적용되었는지 볼까요? 적용 잘됬니?

네!~