공식 문서 : https://nextjs.org/docs/app/api-reference/components/image

github : https://github.com/vercel/next.js/blob/canary/packages/next/src/client/image-component.tsx

<aside> 💡

참고하면 좋은 지점

• fill prop으로 부모 컨테이너를 꽉 채우는 방식 제공
• loading="lazy" 기본값으로 제공 </aside>

기본 사용법

import Image from 'next/image'

// 기본
<Image src="/photo.jpg" width={500} height={500} alt="설명" />

// fill 방식
<div style={{ position: 'relative', height: '300px' }}>
  <Image src="/photo.jpg" fill style={{ objectFit: 'cover' }} alt="설명" />
</div>

비율/크기 처리 방식

• width + height 활용 : 비율 계산용으로 진행. 실제 표시 크기는 CSS 제어 필요 (이미지 로드 전 공간을 미리 잡아둬 CLS 지표에 영향을 줌)
• fill prop을 제공해 부모 컨테이너를 꽉 채울 수 있도록 함
• objectFit : 별도 prop 없이 style로 직접 관리

로딩 처리

• loading="lazy" 기본 제공 — 뷰포트에 들어올 때 로드
• placeholder : 기본값 empty (아무것도 안보임)
  • blur + blurDataURL을 활용해 상태 전환해서 사용 (정적의 경우 자동 생성되나 동적/외부이미지는 직접 생성 필요)

에러 처리

• 내장 fallback 없음
• onError 콜백에서 src를 교체해서 직접 처리해야 함 (client component에서만 사용 가능)