[Next js] img가 아닌 Image를 사용해보자

img 태그는 정말 많이 사용하는 태그일 것이다

하지만 layout shift (이미지가 로딩되기 전과 후의

크기 차이가 있을 때 밀리는 현상)이나 lazy loading,

사이즈 최적화를 위해서는 Image 컴포넌트를 사용하도록 하자

 

import Image from 'next/image'
import food0 from '/public/food0.png'

export default function List() {
  let products = ["Tomatoes", "Pasta", "Coconut"];

  return (
    <div>
      <h1 className="title">상품목록</h1>
      <br />
      <div className="list">
        {products.map((item, i) => {
          return (
            <div className="list-content" key={i}>
              <Image src={food0} className="food-img" />
              <h3>{item}</h3>
              <p>
                이것은 물건입니다. 그것에 대한 설명을 이렇게 마구 써놨습니다
              </p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

 

여기서 주의사항은 img처럼 이미지의 경로를 넣어서는 동작하지 않고

이미지 파일을 import 하여 사용해야 한다는 것이다.

 

만약 외부 이미지 링크를 통해 이미지를 사용하려면

width와 height를 명시해줘야 사용할 수 있다.

그리고 next.config.js에

위와 같은 세팅을 해줘야 한다