Next.js Image

Next.js를 사용하여 토이 프로젝트를 진행하던 와중 <img /> 태그를 사용하여 이미지를 출력해야 하는 상황이 있었습니다.

하지만 아래와 같은 에러가 뜨며 엑박?만 떴습니다.

'StaticImageData' 형식은 'string' 형식에 할당할 수 없습니다.

구글과 공식문서를 찾아보던 와중 Next.js는 자체적으로 제공하는 Image태그가 존재하며 이를 활용해야 한다고 합니다.

https://nextjs.org/docs/api-reference/next/image#required-props

사용법

이미지 태그를 사용하는 방법은 다음과 같이 간단합니다.

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

뭐랄까 Vuetify를 사용할 때 써본 v-img 태그와 비슷한 느낌입니다...

그렇다면 굳이 왜 <img />태그를 사용하지 못하게 할까요?

이유는 다음과 같습니다.

Image태그를 사용해야 하는 이유

1. JPEG보다 약 30% 작은 WebP 와 같은 최신 이미지 형식을 제공해준다.

2. 스크롤을 감지하여 특정 위치를 지나갈 때에만 이미지를 lazy-loading 한다.

3. 동적으로 이미지 크기를 변경할 수 있다.

4. 사진의 품질을 75% 낮춘 임계 값으로 자동 변경한다.

참조 : https://velog.io/@pyo-sh/React-NextJS-%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-import-%ED%95%98%EA%B8%B0