[Next.js] Image

📍 <img /> 말고 <Image /> 써야되는 이유

<Image />는 자동으로 resize, lazy loading, layout shift 방지 등을 지원한다.

• resize : 브라우저에 맞는 크기로 자동 resize

• lazy loading : 화면에 보이지 않는 이미지는 필요한 시점(스크롤 올때)까지 로드하지 않는 방식
  근데❓ 필요하면 priority 옵션으로 즉시 로드할 수도 있음.

• layout shift 방지 : 늦게 로드되는 컨텐츠들로 인해, 먼저 로딩된 컨텐츠가 밀려나는 현상

근데 여기서 문제❓ width, height값이 고정이라 반응형이 제대로 안됨.
그럴땐 fill 옵션을 사용하면 된다.

📍 fill

fill 옵션일때 이미지는 자동으로 absolute를 할당받기 때문에, 부모 요소에 position을 정해줘야한다. (보통 relative)
그리고 부모 요소에 width, height도 정해줘야함 (이미지에 말고)

반응형은 fill + aspect가 가장 간단해서 relative aspect-video w-full 이건 그냥 세트 느낌

<div className="flex flex-col gap-4">
  <div className="relative aspect-video w-full">
    <Image
      src={item.image}
      alt={`sample${index + 1}`}
      fill
    />
    </div>
</div>

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