[Next.js] 이미지 컴포넌트 사용하기

일반적으로 이미지를 업로드 할 때는 img 태그를 사용하는데, next에서는 img 태그가 아닌 Image 컴포넌트를 사용하는 것을 권장한다.

---

▪ 이미지 최적화

Image 컴포넌트를 사용하면 자동으로 이미지를 최적화해 준다.

이미지 크기(width, heigth) 및 화질(quality) 을 간편하게 조절할 수 있다.

<Image
  width={}
  height={}
  src={}
  alt={}
  quality
/>

---

▪ Lazy loading

화면에 보이지 않을 때는 이미지를 로딩하지 않고, 사용자가 이미지를 보게 될 때 이미지를 로딩한다.

초기 페이지 로딩 시간이 단축된다.

---

// 외부 호스트 허용

Image 컴포넌트의 src속성에 외부 호스트(aws, github ... ) 의 이미지 주소를 넣는 것은 보안 상의 이유로 제한되어 있다.
(Invalid src prop  ... hostname is not configured...)

그렇기 때문에 외부 호스트를 사용하고 싶다면 next.config.mjs 파일에 설정해 주어야 한다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "외부호스트 주소"
      }
    ]
  }
};

export default nextConfig;