TIL

Next.js

Next/Image 컴포넌트

Next에서 제공하는 Image 컴포넌트의 기능

기능 (장점)

lazy loading

뷰포트 안에 있는 이미지만 빠르게 로드하고, 밖의 이미지는 필요한 시점까지 로딩을 지연시킴
Next/Image 컴포넌트를 사용하면 자동으로 지원
기능을 끄기 위해서는, Image 컴포넌트의 priority prop을 true로 설정

이미지 사이즈 최적화

디바이스 크기에 맞게 이미지 사이즈를 제공
작은 디바이스에서는 작은 이미지로 만들고, 용량이 작은 webp 포맷으로 변환
이미지에 대한 최초 요청 시 Next.js 서버에서 진행되고 이후 캐싱됨

placeholder 제공

이미지가 로드되는 동안 원래 이미지가 있어야 하는 영역이 없다가, 로드 완료 후 이미지가 생겨나며 레이아웃이 밀려나는 현상: CLS(Cumulative Layout Shift)
이를 방지하기 위해 placeholder를 제공하여 로드 중에도 이미지 높이만큼 영역을 확보해 로드 전후 레이아웃이 shift 되지 않도록 함
빈 영역 또는 blur 이미지로 적용할 수도 있음 (blur 이미지를 적용하려면 로컬 이미지는 build 시 생성, 외부 이미지는 base64로 인코딩된 data url 지정 필요)

사용법

로컬 이미지

import Image from 'next/image';
import myPicture from '../public/myPic.jpg';

function Example() {
  return (
    <Image src={myPicture} alt='my test image' placeholder='blur'>
  )
}

외부 이미지

import Image from 'next/image';

function Example() {
  return (
    <Image src='https://blahblah.com/myPic.png' alt='my test image' width={500} height={500}>
  )
}