📚 Reference

📜 Chapter

‣

CLS (Cumulative Layout Shift)

‣

‣

Font Optimization (next/font)

Next.js는 Google Fonts 또는 로컬 폰트를 쉽게 불러오고, 자동으로 성능 최적화해주는 next/font 컴포넌트를 제공한다.

Google Fonts 사용

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function Page() {
  return <p className={inter.className}>Hello world</p>
}

subsets: 사용할 문자 세트 지정
Next.js가 자동으로 폰트를 다운로드하고 호스팅해줌 (Google CDN 요청 X)
CLS(Layout Shift) 문제 없이 안정적인 렌더링 가능

로컬 폰트 사용

import localFont from 'next/font/local'

const myFont = localFont({ src: './my-font.woff2' })

src: 프로젝트 내 폰트 파일 경로
variable: CSS 변수로 폰트 지정도 가능 (font-family 커스터마이징에 유용)