NextJS 11버전에서 next Image 태그 사용하기

NextJs 10 버전에서 처음 나온 Image태그의 11 버전에서의 변동된 부분 중 개인적으로 만족했던 기능들에 대해 설명해 보겠습니다.

 

정적 이미지의 경우 10버전에서 width, height 값이 필수였던 것과 달리 image를 import 해서 사용할 경우 높이와 넓이를 동적으로 설정해 줍니다.

 

물론, 높이나 넓이 중 하나만 정의하여 다른 한 값만 자동으로 지정하게 하는 것도 가능합니다.

 

그리고 blur라는 placeholder속성이 추가되어 네트워크가 느린 환경에서 로딩 중 이미지를 흐리게 보여주는 기능이 추가되었고,

Next.js의 새로운 버전에서는 또한 Image 태그의 백엔드에서 제공하는 blurDataURL prop을 사용해 흐린 동적 이미지를 지원합니다. 서버에서 blurha.sh와 같은 어플리케이션을 이용하여 blurDataURL을 커스텀하게 생성할 수도 있습니다.

import Image from 'next/image';
import testImage from '/public/test.png';

export default () => 
	<Image
    	src={testImage}
        alt="test"
        placeholder="blur"
        blurDataURL="the url to your custom image"
    />