NextJS Image Component
Image Component를 사용하는 이유
Image는 img 태그의 확장입니다.
Core Web Vitals를 달성하기 위해 다양한 성능 최적화 기능이 내장되어 있습니다.
Core Web Vitals는 사용자 경험을 측정하는 중요한 지표이면서, 구글 검색 순위에 반영됩니다.
Image Component에 내장된 최적화 내용
- 향상된 성능(Improved Performance): 최신 이미지 형식을 사용하여 각 장치에 대해 항상 올바른 크기의 이미지를 제공
- 시각적 안정성(Visual Stabillity): 자동으로 누적 레이아웃 이동방지( Cumulative Layout Shift [ CLS ] )
- 더 빠른 페이지 로드(Faster Page Loads): 이미지가 뷰포트에 들어왔을 때만 로드되기 떄문에 초기 페이지 로드 속도가 빠름
- 자산 유연성(Asset Flexibillity): 외부에 저장되어 있는 이미지까지도 리사이징 가능
NextJS에서 <Image /> 대신 <img />를 사용하게 될 경우 아래와 같은 경고 문구가 나오게 됩니다.
Warning: Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
img를 사용하면 LCP속도가 느려지고 대역폭이 커질 수 있기 때문에, <Image />를 사용하여 이미지를 최적화 시키라는 내용입니다.
Image Component 사용하기
next.config.js
const module.exports = {
images: {
domains: ["도메인 주소"]
}
}외부에서 이미지를 불러오기 위해서는 next.config.js에서 도메인을 설정해야 합니다.
app.tsx
<Image src={이미지주소} alt={이미지이름} layout="fill" />
<Image src={이미지주소} alt={이미지이름} width={100} height={100} />정적으로 불러오는 이미지 파일과 layout 값이 "fill"인 이미지를 제외하고는 width와 height값이 필수적으로 들어가야 합니다.
width와 height를 필수적으로 입력하는 이유는 CLS를 방지하기 위해서 입니다.
next/image 13이후 버전에서 변경된 내용
13버전 이후 아래처럼 layout에 하이픈이 그어졌습니다..
react_devtools_backend.js:2655 Image with src " 이미지 주소내용... " has legacy prop "layout". Did you forget to run the codemod?
번외:: 위 내용 때문에 <Image />에서 <img />로 갈아탔다가 아래와 같은 경고문을 받게 되었습니다.
Warning: Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
<img />를 사요요하면 LCP속도가 느려지고 대역폭이 커질 수 있기 때문에 <Image />를 사용해서 최적화 시키라는 뜻입니다.
다시 돌아와서 layout을 사용하기 위해서 아래와 같은 내용을 추가시켰습니다.
$ npx @next/codemod next-image-to-legacy-image .위 내용으로 next/image 가져오기를 next/legacyy/image로 자동변경해준다고 나와있는데... 자동변경 안해주던뎅..
NextJS next/image version 13 바로가기
NextJS next/legacy/image에 관한 내용 바로가기
그래서 직접 그냥 변경해주었습니다.
// 변경전
import Image from 'next/image';
// 변경후
import Image from 'next/legacy/image';위처럼 변경하고나니 아래처럼 하이픈이 제거되었습니다.
