Next.js <Image />

이번에 next.js의 <Image /> 에서 AVIF 포맷을 지원한다고 해서 Image 태그를 다시 한번 사용해봤다.

• AVIF 포맷 : 용량이 더 적은 파일 형식(.jpg, .png 같은 것)
  • https://itigic.com/ko/heif-and-avif-image-photography-formats-differences/

Image 태그 사용 후기

• https://nextjs.org/docs/api-reference/next/image
• 다른 도메인의 asset(image 등)을 가져올 때
  • https://nextjs.org/docs/messages/next-image-unconfigured-host
• Error: Image with src "https://cdn.inflearn.com/assets/brand/brand_logo.png" must use "width" and "height" properties or "layout='fill'" property.
  • Image 태그는 불편한게 항상 width, height을 지정해줘야 됨

// next.config.js
module.exports = {
  images: {
    domains: ['assets.example.com'],
  },
};

• width와 height을 지정할 때 '80%'를 입력값을 주면 80px로 인식함 : 스타일링이 불편함
  • %를 이해 못 하는 것 같음
• Image 태그는 거의 사용 안 할 것 같음