[Next.js] next/image

원본에 비해 훨씬 더 작은 용량으로 이미지를 사용할 수 있음

webp형식

서버에서 자동으로 이미지 최적화

quality 속성으로 얼마나 최적화할지 정의 기본 75

loading="lazy" 자동으로 적용됨

placeholder="blur"  사진이 다운로드 되는 동안 블러 이미지 적용됨, 블러 이미지는 next가 자동으로 만들어 제공함 -> layout shift 방지

소스파일을 스태틱하게 임포트 했기 때문에 위와 같은 최적화가 가능함

빌드타임에 이미 이미지의 너비, 높이 알 수 있음

	import example from '/public/example.jpg';


      <figure>
        <Image
          src={example}
          alt="v13 image"
          // width={500}
          // height={100}
          // placeholder="blur"
        />
        <figcaption>v13 image</figcaption>
      </figure>

 

외부 이미지를 가지고올 때는 외부 이미지의 크기를 빌드 타임에 알 수 없으므로 반드시 크기를 명시해야함(width, height)

 

이미지 파일을 정적으로 import 하지 않고 스트링을 통해 임포트하면 외부 링크로 인식함

 

fill속성

외부 이미지를 사용하는데 크기를 모를 때 fill속성을 추가한다 -> 이미지의 사이즈는 부모에 의해 결정됨

+추가로 style 속성으로 css줄 수 있음(objectFit="cover")

 

외부링크를 사용할 수 없다는 메시지가 보일 때

next.config.js 파일 수정 next doc Domains

 

 

 

next/legacy/image

next/image와 비교해서 추가적으로 html상에 span 태그가 생성됨(이걸로 스타일링을 추가적으로 함)

사용성, 직관성 떨어지고 웹 표준을 해칠 수 있는 우려

 

next/image 컴포넌트는 기본적으로 정적으로 사이즈가 유지됨

next/legacy/image는 레이아웃 속성을 꼭 지정해야 함, 화면에 따라 늘어나고 함..

 

layout shit는 뒤늦게 로드가 되는 소스로 인하여 화면에서 봤을 때 밀리는 현상

 

 

아이콘

npm install react-icons