next/image 컴포넌트는 무엇을 하나요?

Question

Accepted Answer

`next/image`는 `` 태그를 대체하는 Next.js의 최적화된 컴포넌트입니다. 직접 손으로 구현해야 할 여러 이미지 성능 모범 사례를 자동으로 적용해 줍니다. ```tsx import Image from "next/image"; export default function Avatar() { return (

); } ``` ## 자동으로 처리하는 것 - **리사이징 및 최신 포맷** — 적절한 크기의 이미지를 제공하고 즉석에서 WebP/AVIF로 변환하여 원본보다 훨씬 작게 만듭니다. - **반응형 `srcset`** — 여러 크기를 생성해 각 디바이스가 알맞은 것을 다운로드합니다. - **기본 lazy loading** — 화면 밖 이미지는 가까이 스크롤될 때만 로드됩니다(`priority`로 재정의). - **레이아웃 시프트(CLS) 방지** — 필수인 `width`/`height`(또는 `fill`)가 공간을 예약하여 이미지가 로드될 때 페이지가 흔들리지 않습니다. - **블러 플레이스홀더** — `placeholder="blur"`는 로딩 중 작은 블러 미리보기를 보여 줍니다. ## 크기를 모를 때는 fill ```tsx

``` 이미지가 위치 지정된 부모를 채워야 할 때는 고정 width/height 대신 `fill`을 사용하세요. 히어로/커버 이미지에서 흔합니다. ## 외부 이미지는 설정이 필요 ```js // next.config.js — 보안을 위해 원격 호스트를 허용 목록에 등록 module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } }; ``` ## 왜 중요한가 이미지는 보통 페이지에서 가장 무거운 자산이며 나쁜 Core Web Vitals(LCP, CLS)의 주요 원인입니다. `next/image`는 리사이징, 최신 포맷, 반응형 `srcset`, lazy loading, 레이아웃 시프트 방지를 자동화하여 큰 성능 작업을 단일 컴포넌트로 바꿔 줍니다. LCP 이미지에 대한 `priority`만큼은 반드시 기억해야 할 하나의 손잡이입니다.