next.js 이미지 최적화 간단 정리

기존 img tag를 이용하면 jpeg로 경량화된 이미지가 아니라 웹 프로젝트의 용량을 많이 차지한다. 용량 = 성능 

 

next에서는 간단하게 img를 > Image 컴포넌트로  대체하여 사용하면 된다.

        <Image

          src={coverImgUrl}

          width={240}

          height={300}

          alt={`도서 ${title}의 표지이미지`}

        />

이미지 원본 사이즈를 다 쓰지 않으므로 가로 , 세로 속성값을 정의해준다. 

 

img를 Image로 대체하고, 이 이미지가 프로젝트 내부가 아닌 외부에서 가져온 것이면 next.config.ts에 아래와 같이 추가하면 된다. 

const nextConfig: NextConfig = {

  /* config options here */

 

  images: {

    domains: ['shopping-phinf.pstatic.net']

  }

 

 

경량화된 webp 이미지 타입으로 불러오며 용량이 1/10 가까이 줄었다.