NextJS 에서 Image 컴포넌트를 사용하는 이유.
: NextJS로 웹개발을 할 때, React에서 사용하던 이미지( <img />) 컴포넌트 대신에, next/image에서 제공하는 <Image />태그를 사용.
해당 컴포넌트를 사용하면 NextJS에서 제공하는 이미지를 최적화.
- 이미지가 로딩이 완료되기 전, width, height, blurDataURL 정보가 자동으로 생성
--> 이미지가 로딩 된 후 해당 컴포넌트의 사이즈가 변화하여 레이아웃이 로딩 전 후로 변경되는 것을 방지(CLS(Cummulative Layout Shift) 방지)
--> 따라서 정적 이미지가 아닌, API 또는 url을 통해, 외부 이미지를 가지고 오는 경우 Image 컴포넌트의 높이, 넓이 (필수)속성을 지정해줘야 한다.
Image 태그에 필수 속성
- src
1) 프로젝트에 가지고 있는 정적이미지 파일
: 절대 또는 상대 경로로 이미지를 불러와서 사용할 수 있음
2) API 또는 외부 도메인에서 이미지를 가지고 오는 경우
: 외부에서 이미지를 가져오는 경우, next.cofig.js 파일에서 API의 IP 또는 도메인을 지정해줘야한다. (--> 해당 기능은 외부에서 웹사이트의 이미지를 변경하는 어뷰징(abusing) 방지)
// S3에 저장 된 경우, 경로를 제외한 domain을 추가한다
images: {
domains: [
'localhost', // local 테스트용
'wattissl3.kro.kr', // Deploy 될 Domain
'13.124.184.110', // Swagger on EC2
'watti-images-prod.s3.ap-northeast-2.amazonaws.com', // AWS S3
], // 이미지 출처를 지정 -> 앱 보호
}- width, height (layout 속성이 'fill' 이거나, 정적 이미지 파일일 경우 제외)
: 이미지가 컴포넌트에서 얼마만큼을 차지하고 있는지 지정 -> 이미지 다운로드가 진행중일때, 해당 이미지 사이즈만큼 비워줌
(부모 컴포넌트 사이즈에 맞추기 위해서는 layout='fill' 속성을 부여하고, 부모 컴포넌트의 width와 height를 지정하는 방법도 있음)
선택 속성
-
layout
1) intrinsic(default): 이미지의 width, height에 따라 컴포넌트 차지
2) fixed: 이미지 자체의 width, height에 따른 렌더링
3) fill: 상위 컴포넌트의 사이즈에 맞춤
4) responsive: 부모 컨테이너의 width에 맞게 이미지 크기 조정 -
loader: image 요청 url 커스텀, 서버로부터 커스텀한 url에 맞는 이미지를 전달받음
-
quality(default=75): 이미지의 퀄리티 지정(1~100)
-
placeholder: 이미지 로딩중일때 상태 지정(스켈레톤 기능) + CLS 방지
1) empty(default): 지정된 width, height의 빈 공간
2) blur: blurDataURL을 통해 정적(또는 동적) 이미지 지정 -
priority:
next/image는 디폴트로 LazyLoading을 지원.
priority를 true로 변경해주면, 이미지를 미리 렌더링 할 수도 있다(예를들어, 랜딩 페이지 등에서 이미지를 먼저 화면에 보이게 하고자 할 때 사용)
- loading
1) lazy: 이미지 크기로 인한 레이아웃 변경 방지, 이미지 크기를 맞춘 후 화면에 렌더
2) eager: 이미지 로딩이 끝나자마자 그대로 올림
참고자료
https://nextjs.org/docs/api-reference/next/image#fill
https://mycodings.fly.dev/blog/2022-09-08-all-about-nextjs-image-component
(해당 블로그의 "이것만은 꼭!" 부분, 현업 이미지 최적화 방법)
더 알아볼것
- 이미지 최적화 방법(서버에서 받은 이미지를 최적화 해서 저장할 수 있는지...)
- 이미지의 SEO 동작 원리
