Next.js Fill을 활용한 이미지 높이, 너비 제어

이전 버전의 layout prop 대신, fill prop을 사용하여 반응형 이미지를 쉽게 구현할 수 있습니다.

또한, 컴포넌트의 기본 이미지 요소를 style 또는 className을 사용하여 스타일링할 수 있습니다.

문제가 발생하는 기존 사용 방법

import Image from 'next/image'

const Index = () => {
   return (
       <div>
           <Image
               src="https://picsum.photos/800/600"
               layout="fill"
               className="w-48 aspect-square md:w-72 xl:w-48"
           />
       </div>
   )
}

<Image
  src="https://picsum.photos/800/600"
  fill
  ...
/>

<Image
  width="0"
  height="0"
  sizes="100vw"
  className="h-auto w-full"
  src={avatar?.image}
  alt={avatar?.title}
/>