Next.js 최적화 (next/image, next/font, 번들 최적화)

Dam·2026년 3월 25일

@next/font React code_splitting lazyloading next.js next/image optimization 번들 최적화 성능 최적화 웹 성능

[Next.js]

목록 보기

25/28

📌 개요

Next.js는 기본적으로 다양한 성능 최적화 기능을 내장하고 있다.
특히 이미지, 폰트, 번들 크기 최적화는 실제 서비스에서 로딩 속도와 UX에 큰 영향을 준다.

이 글에서는 다음 3가지를 핵심으로 정리한다:

next/image
next/font
번들 최적화 개념

🖼 1. next/image (이미지 최적화)

✅ 왜 필요한가?

일반 <img> 태그를 사용하면 다음과 같은 문제가 발생한다:

이미지 크기가 크면 로딩 속도 저하
다양한 디바이스 대응 어려움
lazy loading 직접 구현 필요

👉 next/image는 이 문제를 자동으로 해결해준다.

✅ 주요 기능

1. 자동 사이즈 최적화

디바이스 해상도에 맞는 이미지 제공
불필요하게 큰 이미지 다운로드 방지

2. Lazy Loading (지연 로딩)

화면에 보일 때만 이미지 로딩

3. WebP / AVIF 자동 변환

더 가벼운 이미지 포맷으로 자동 변환

4. CDN 기반 최적화

요청 시 최적화된 이미지 제공

✅ 기본 사용법

import Image from 'next/image'

<Image
  src="/example.png"
  alt="example"
  width={500}
  height={300}
/>

✅ 주요 옵션

● priority (LCP 최적화)

<Image src="/hero.png" priority />

👉 가장 먼저 보여야 하는 이미지에 사용

● fill (부모 요소 채우기)

<Image src="/image.png" fill style={{ objectFit: 'cover' }} />

● sizes (반응형 최적화)

sizes="(max-width: 768px) 100vw, 50vw"

⚠️ 주의사항

width/height 또는 fill 반드시 필요
외부 이미지 사용 시 설정 필요

images: {
  domains: ['example.com'],
}

🔤 2. next/font (폰트 최적화)

✅ 왜 필요한가?

기존 웹폰트 사용 시 문제:

FOUT (Flash of Unstyled Text)
FOIT (Flash of Invisible Text)
렌더링 지연
외부 요청 증가

👉 next/font는 이를 해결한다.

✅ 주요 특징

1. 자동 서브셋

필요한 문자만 다운로드

2. Self-hosting

외부 서버 요청 없이 내부에서 제공

3. Layout Shift 방지

CLS 개선

✅ 기본 사용법 (Google Font)

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

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

export default function RootLayout({ children }) {
  return (
    <html className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

✅ 로컬 폰트 사용

import localFont from 'next/font/local'

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

⚠️ 주의사항

글로벌 layout에서 적용 권장
폰트 개수 최소화

📦 3. 번들 최적화 개념

✅ 번들이란?

브라우저에 전달되는 JavaScript 파일 묶음
번들 크기가 클수록 로딩 속도 저하

✅ 왜 중요한가?

초기 로딩 속도 개선
TTI (Time To Interactive) 향상
사용자 이탈 감소

✅ 주요 전략

1. Code Splitting

import dynamic from 'next/dynamic'

const Component = dynamic(() => import('./Component'))

2. Dynamic Import

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  ssr: false,
})

3. Tree Shaking

사용하지 않는 코드 제거
ES Module 사용 시 자동 적용

4. 라이브러리 최적화

❌ 잘못된 예

import _ from 'lodash'

✅ 좋은 예

import debounce from 'lodash/debounce'

5. Bundle Analyzer

npm install @next/bundle-analyzer

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: true,
})

module.exports = withBundleAnalyzer({})

👉 번들 크기 시각적으로 분석 가능

⚡ 추가 최적화 포인트

1. SSR vs CSR 선택

SSR: 초기 렌더링 빠름 (SEO 유리)
CSR: 인터랙션 빠름

👉 상황에 맞게 선택

2. 캐싱 전략

브라우저 캐시
CDN 캐시

3. API 요청 최적화

batching
caching (SWR, React Query)

📌 한눈에 정리

next/image

자동 이미지 최적화
lazy loading
WebP 변환

next/font

폰트 최적화
CLS 방지
self-hosting

번들 최적화

code splitting
dynamic import
tree shaking

🚀 결론

Next.js는 강력한 최적화 기능을 기본 제공하지만,
제대로 활용하지 않으면 성능 차이가 크게 난다.

👉 핵심 요약

이미지 → next/image
폰트 → next/font
JS → 번들 최적화

이 3가지만 적용해도 체감 성능은 확실히 개선된다.

Dam

🌐 DOM 위에서 살아남기

이전 포스트

Next.js에서 Edge Runtime은 언제 쓰는 걸까? (Node.js와 비교 정리)

다음 포스트

Next.js 최적화 (next/image, next/font, 번들 최적화)

[Next.js]

📌 개요

🖼 1. next/image (이미지 최적화)

✅ 왜 필요한가?

✅ 주요 기능

1. 자동 사이즈 최적화

2. Lazy Loading (지연 로딩)

3. WebP / AVIF 자동 변환

4. CDN 기반 최적화

✅ 기본 사용법

✅ 주요 옵션

● priority (LCP 최적화)

● fill (부모 요소 채우기)

● sizes (반응형 최적화)

⚠️ 주의사항

🔤 2. next/font (폰트 최적화)

✅ 왜 필요한가?

✅ 주요 특징

1. 자동 서브셋

2. Self-hosting

3. Layout Shift 방지

✅ 기본 사용법 (Google Font)

✅ 로컬 폰트 사용

⚠️ 주의사항

📦 3. 번들 최적화 개념

✅ 번들이란?

✅ 왜 중요한가?

✅ 주요 전략

1. Code Splitting

2. Dynamic Import

3. Tree Shaking

4. 라이브러리 최적화

5. Bundle Analyzer

⚡ 추가 최적화 포인트

1. SSR vs CSR 선택

2. 캐싱 전략

3. API 요청 최적화

📌 한눈에 정리

next/image

next/font

번들 최적화

🚀 결론

Next.js에서 Edge Runtime은 언제 쓰는 걸까? (Node.js와 비교 정리)

Next.js 메타데이터 & SEO 완벽 정리

0개의 댓글