Next.js에서 제공하는 주요 Function과 component 아래 공식 문서를 통해 살펴봅니다.

Docs

1. Components

1 ) Font Module

Next.js에서는 웹 폰트를 효율적으로 로드하고 사용하기 위한 모듈인 next/font를 제공합니다.

폰트 최적화 기능을 쉽게 활용할 수 있으며, 웹 성능을 향상시킬 수 있으며, 폰트 파일을 미리 로드(preload)하거나, 로컬 스토리지에 폰트를 캐싱하는 등의 최적화 작업을 간편하게 구현할 수 있습니다.

font module은 구글에서 제공하는 font module과 자체 호스팅 font module로 나뉩니다.

아래는 Font Module에 종류와 지원하는 속성 테이블입니다.

Key font/google font/local type Required
src ❌ ✔ String or Array of Objects Yes
weight ✔ ✔ weight Required/Optional
style ✔ ✔ style -
subsets ✔ ❌ subsets -
axes ✔ ❌ axes -
display ✔ ✔ display -
preload ✔ ✔ preload -
fallback ✔ ✔ fallback -
adjustFontFallback ✔ ✔ adjustFontFallback -
variable ✔ ✔ variable -
declarations ❌ ✔ declarations -

Font Module 적용 예시 코드

import { googleFont } from 'next/font/google';
import { localFont } from 'next/font/local';

const roboto = googleFont({
  name: 'Roboto',
  subsets: ['latin'],
  weights: ['400', '700'],
});

const myFont = localFont({
  src: './font/font.woff2',
  weight: '400',
  style: 'normal',
});

2 ) Head

Next.js의 <Head/> 컴포넌트는 HTML 문서의 <head> 태그 내부에 메타데이터, 스크립트, 스타일시트 등을 삽입할 수 있게 해주는 컴포넌트입니다.