[NextJs] Image 모듈 사용

 

 

NextJs에서 이미지를 사용할때 Next에서 지원하는 두가지 이미지 모듈이 있습니다.

 

import하는 방법은 아래와 같습니다.

 

 

import Image from "next/image"

import Image from 'next/legacy/image';

 

 

이미지 모듈

 

먼저 next/image 모듈은 next.js 10.00.0 버저부터 추가된 새로운 이미지 컴포넌트입니다.

next/legacy/image는 그 이전 버전의 이미지 컴포넌트를 지칭합니다.

 

 

next/image 모듈의 개선점

 

 

최적화 및 성능

 

next/image는 이미지 최적화와 성능 향상을 위해 내장된 다양한 기능들을 지원합니다.

Lazy loading, 이미지 사이즈 추론, 반응형 이미지 지원 등이 있습니다.

next/legacy/image는 이러한 최적화 기능들을 제공하지 않습니다.

 

프리셋 지원

 

next/image는 next.config.js 파일을 통해 간단하게 프리셋을 지정하여 이미지 최적화 설정을 조정할 수 있습니다.

이를 통해 웹팩 옵션을 세부적으로 설정할 필요 없이 최적의 이미지를 쉽게 사용할 수 있습니다.

 

 

반응형 이미지

 

next/image는 반응형 이미지 처리를 위한 srcset을 자동으로 생성하며,

viewport 및 디바이스에 따라 적절한 이미지를 제공할 수 있습니다.

이는 페이지 로딩 속도를 향상시키는 데 도움이 됩니다.

 

next/image 모듈에서는 이미지의 크기를 px로 지정해줘야합니다.

%,vw 같은 지정된 값이 아닌 유동적인 값은 사용할 수 없습니다.

 

next/lagacy/image에선 가능하다

 

next/image에서 사용하려했을 때

 

 

상황에 따라 필요한 모듈을 사용하면 되지만, 많은 개선점과 장점을 가지고 나온

next/image 모듈을 애용해보면 좋을 것 같습니다.