[NextJS] next/image 사용 방법

NextJS에서는 img태그가 아닌 next에서 import 해 온 next/image의 Image태그를 사용해야 한다.
NextJS에서 이미지를 최적화시켜주기 때문이다.

 

* 공식 문서 *
https://nextjs.org/docs/api-reference/next/image

 

 

---

1. 장점

• Loader을 통해서 커스터마이징 가능
• 자동으로 Lazy Loading을 통해 이미지 최적화를 지원해주지만, pre loading을 원하는 경우 취소 가능
• 자동 스켈레톤 UI(placeholder 통해서), CLS 방지도 가능
• 이미지 캐싱도 자동으로 해주고 expiration time 설정도 가능
• next.config.js를 통해 지정된 곳에서만 이미지를 받아오며 악의적인 유저로부터 앱을 보호 가능

 

 

---

2. 사용 방법

2-1) 기본 사용 방법

import Image from 'next/image'
const Example = () => (
  <div className="grid-element">
    <Image
      src="/example.png"
      layout="fill"
      sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
    />
  </div>
)

• src : 이미지 저장 경로(정적으로 import ) or 외부 이미지 URL
  (외부 이미지의 경우 next.config.js의 domain에 추가해두어야 해당 사이트에서 이미지를 받아올 때 보안에 신경 쓸 수 있다.)
• layout :  뷰포트(화면 영역)의 크기가 변경될 때 이미지의 레이아웃 동작, 해당 옵션을 사용하면 width, height를 주지 않아도 된다. 

Layout 옵션 종류	설명
intrinsic (기본값)	이미지는 더 작은 뷰포트의 경우 크기를 축소하지만 더 큰 뷰포트의 경우 원래 크기를 유지한다.
fixed	뷰포트가 변경되도 이미지 크기가 변경 되지 않는다.
responsive	컨테이너 너비에 맞게 이미지 크기 조정
fill	상위 요소가 상대적인(relative) 경우 이미지의 너비와 높이가 모두 상위 요소의 치수로 늘어난다. (상위 요소가 position: relative가 설정되어 있어야한다.)

 

 

2-2) Loader를 사용한 방법

import Image, { ImageLoaderProps } from "next/image";

const myLoader = ({ src, width, quality }: ImageLoaderProps) => {
  return `${src}?w=${width}&q=${quality || 75}`;
};

const Home: NextPage = () => {
  return (
    <div>
      <Image
        loader={myLoader}
        src="http://t1.daumcdn.net/friends/prod/editor/dc8b3d02-a15a-4afa-a88b-989cf2a50476.jpg"
        alt="Picture of the author"
        width={500}
        height={500}
      />
    </div>
  );
};

export default Home;

• loader : URL을 커스텀할 수 있는 함수를 가질 수 있다. loader의 경우 src, width, quality를 props로 받아 url에 포함시킨 후 return 하게 된다.
• quality : 1부터 100 사이의 숫자를 지정할 수 있으며, 숫자는 높아질수록 높은 퀄리티를 뜻하고, default는 75이다.

 

 

2-3) 기타 옵션

- priority

• next/image의 장점은 LazyLoading을 자동 지원한다는 것입니다. 하지만 Lazy Loading을 사용할 필요가 없는 경우는 priority를 true로 줌으로써 lazy loading을 취소시킬 수 있습니다.
• 이 priority는 LCP(Largest Contentful Paint)와 관련 있습니다. LCP란 사용자가 화면에 렌더링 되는 콘텐츠를 보기까지 얼마나 시간이 걸리냐를 말하는데 렌더링을 완료한 시점을 결정하는 데 사용할 수 있습니다. 즉, LCP가 발생하면 응답 시간이나 리소스 로드 시간이 느리다고 판단됩니다. 그럼 언제 사용해야 할까요? pre-loading이 필요한 경우, 예를 들어 KV인 경우가 가장 대표적이라고 볼 수 있습니다.

 

-placeholder

• image가 로딩되기 이전에 상태를 지정 가능하고 blur, empty 중 설정 가능합니다.
• empty(default)인 경우 그냥 빈 space를 보여주지만, blur을 설정한 경우 통해 정적/동적 이미지 지정이 가능합니다. 해당 이미지는 10px 이하의 사이즈 이미지를 추천하고 로딩이 성공적으로 되기 이전까지 보여줍니다.