뷰포트에 따라 성능향상을 위해 리사이징 및 레이지로딩을 구현할 필요가 있는데, Next에서는 이를 기본적으로 지원해 준다.
Next의 <Image />
를 이용하여 다음과 같은 효과를 낼 수 있다.
CLS(Cumulative Layout Shift)
방지Cumulative Layout Shift(누적 레이아웃 이동, CLS)
<Image />
의 사용import Image from 'next/image';
import picture from '../assets/picture.png';
const Component = () => {
return <Image src={picture} />
}
Component.js
import Image from 'next/image';
const Component = () => {
return <Image src="target-url.com/picture/1" />
}
next.config.js
module.exports = {
images: {
domains: [
"target-url.com",
],
},
};
<Image />
px
intrinsic
(default) : 큰 화면에서는 지정된 너비와 높이를 유지하지만 작아질수록 부모 컨테이너 요소에 맞게 바뀜fixed
: 지정한 너비와 높이를 화면 상관없이 계속 유지함responsive
: 부모 요소가 display:block
일 경우 이미지가 그에 맞게 변형fill
: 부모 요소의 position 값이 relative일 경우, 이미지가 부모 컨테이너 요소에 맞게 늘어남.empty
(default)blur
: blurDataURL
과 사용. 이미지를 로드할 때 흐린 이미지에서 뚜렷해지는 효과 부여뷰포트에 따라 성능향상을 위해 리사이징 및 레이지로딩을 구현할 필요가 있는데, Next에서는 이를 기본적으로 지원해 준다.
Next의 <Image />
를 이용하여 다음과 같은 효과를 낼 수 있다.
CLS(Cumulative Layout Shift)
방지<Image />
의 사용import Image from 'next/image';
import picture from '../assets/picture.png';
const Component = () => {
return <Image src={picture} />
}
Component.js
import Image from 'next/image';
const Component = () => {
return <Image src={picture} />
}
next.config.js
module.exports = {
images: {
domains: [
"target-url.com",
],
},
};
<Image />
px
intrinsic
(default) : 큰 화면에서는 지정된 너비와 높이를 유지하지만 작아질수록 부모 컨테이너 요소에 맞게 바뀜fixed
: 지정한 너비와 높이를 화면 상관없이 계속 유지함responsive
: 부모 요소가 display:block
일 경우 이미지가 그에 맞게 변형fill
: 부모 요소의 position 값이 relative일 경우, 이미지가 부모 컨테이너 요소에 맞게 늘어남.empty
(default)blur
: blurDataURL
과 사용. 이미지를 로드할 때 흐린 이미지에서 뚜렷해지는 효과 부여next/image | Next.js
Cumulative Layout Shift(누적 레이아웃 이동, CLS)