(Next.js) Next/Image Do not use <img>

* 문제점

Next.js에서는 이미지 최적화를 위해 img 태그의 사용을 권장하지 않고

Next/Image 컴포넌트를 사용하도록 하고 있다.

Next/Image는 built-in 성능을 최적화하기 위해 <img> 태그를 확장한 것으로

크롬 웹 스토어의 'Lighthoust'와 같은 확장 프로그램으로 측정하는

core-web-vitals에서 좋은 점수를 받을 수 있게 해주는 컴포넌트이다.

하지만 <Image> 컴포넌트는

width와 height 값을 px 단위로 지정을 해야 하는 불편함이 있고,

width와 height 값을 생략하기 위해 layout="fil' 속성을 설정하면

그런데 위와 같은 이슈는 이미지 링크의 src를 어디서 가져오는지에 따라

이슈가 되기도 하고 되지 않기도 한다.

* 해결방법

** src에서 직접 이미지 url (원격 혹은 로컬) 을 기재한 경우

src에 url을 직접 기재한 경우에는 build 시점에 파일에 접근할 수 없기 때문에

width와 height의 값을 필수로 기재해야 한다.

<Image
  src="/images/main/filament.png"
  alt=""
  className="fadeinup-target hidden"
  width={500}
  height={300}
/>

** static import 사용하여 src에 이미지 정보를 담은 변수를 기재한 경우 (실질적 해결책)

import scanner from '../public/images/main/scanner.png' 

<Image
  src={scanner}
  alt="scanner"
  className="fadeinup-target hidden"
/>

scanner라는 변수에 이미지 정보를 담아서 src에 할당에 주었다.

이럴 경우 Next.js가 width, height를 자동을 계산해준다.

이미지가 로딩되는 동안 Cumulative Layout Shift를 방지해 준다.

잡스러운 코딩, 잡코딩