next/font

Self-hosting

• 웹 폰트 파일을 외부 서버에서 다운로드❎ 자신의 서버 혹은 프로젝트 static assets에 직접 저장하여 제공
• Next.js 프로젝트 빌드 시 함께 번들링하며 어플리케이션의 다른 정적파일들과 함께 자체적으로 호스팅
• Google Font를 사용하더라도 빌드 시 폰트와 CSS 파일을 다운로드하여 프로젝트에 포함, 브라우저가 Google 서버로 요청을 보내지 않도록 함
• 폰트가 외부에서 로드될 때, 폰트가 다운로드되기 전에는 fallback font가 사용되다가 폰트가 로드되면 텍스트가 갑자기 바뀌면서 레이아웃이 이동하는 FOUC(Flash of Unstyled Content) 또는 CLS(Cumulative Layout Shift)가 발생하는데 next/font는 폰트를 사전에 로드(preload)하고, CSS를 최적화하여 폰트가 적용되는 동안 레이아웃 시프트를 최소화
• 폰트 요청이 외부 서버로 가지 않으므로 사용자의 프라이버시를 보호하고 규제 준수를 쉽게 만족하며 오프라인 환경에서도 폰트를 정상적으로 렌더링

동작방식

• 폰트 지정: next/font/google next/font/local import 하여 사용
• 빌드 시 다운로드: 빌드 타임에 지정된 폰트 파일과 관련된 CSS를 다운로드, 정적 자산에 포함
• 자동 최적화: 폰트 파일을 subsetting, preload
• 렌더링: 클라에서 폰트 요청이 외부 서버로 가지 않고 프로젝트 정적 자산에서 제공

https://nextjs.org/docs/app/api-reference/components/font