sizes

Next.js 14에서 원격 이미지 최적화하기

원격 서버를 통해 제품 이미지를 가져왔습니다. 이 때 이미지의 크기가 일정하지 않아서 명시적으로 이미지 크기를 지정할 수 없었습니다. 이번 아티클은 해당 문제를 해결하는 과정을 정리해보았습니다. Next.js의 Image 컴포넌트는 자동 이미지 최적화를 위한 기능으로 HTML 요소를 확장합니다.import Image from 'next/image'WebP 및 AVIF와 같은 최신 이미지 형식을 사용하여 각 디바이스에 적합한 크기의 이미지를 자동으로 제공합니다.이미지가 로드될 때 레이아웃 쉬프트를 방지합니다.브라우저 지연 로딩을 사용하여 이미지가 뷰포트에 들어올 때만 로드됩니다.원격 서버에 저장된 이미지도 온디맨드 이미지 크기 조정이 가능합니다.온디맨드 이미지요청 시에 이미지를 동적으로 생성하거나 조정하..