[Next.js] next/image 사용해보기

next/image

1) 기본 사용

<figure>
       <img
          src="https://lecture-1.vercel.app/example.jpg"
          alt="example"
          width={500}
          height={100}
          https://web.dev/browser-level-image-lazy-loading/ 
          loading="lazy"
        />
        <figcaption>example img</figcaption>
      </figure>

• next.js에서는 image를 로드할 수 있도록 모듈을 제공해준다. img을 사용하려면 src에 public에 있는 파일을 쓰거나 로컬 사이트의 주소를 가져와서 사용이 가능하다.
• 페이지에 이미지가 보이지 않았는데, 이미지를 로드하는 경우가 있다. 이 경우에는 미리 이미지 파일을 로드하면 네트워크 낭비가 된다. 그래서코드를 사용하면 네트워크를 절약할 수 있다.

loading="lazy"

2) 장점

img태그를 사용한 것과 next/image태그를 가져와 이미지를 불러온 것을 비교해보자. Network탭에 들어가서 비교해봤을 때 확실히 차이가 난다.

img next/image

type	jpeg	webp
size	68b	5kb

→표로 비교를 해보았다. next/image를 사용했을 때 자동으로 이미지 용량을 최적화를 해준다. webp로 이미지를 보여주기에 용량이 더 작다.

3) 옵션

• quality : 퀄리티도 더 낫게 설정해줄 수 있다.
• placeholder : blur설정을 했을 때, 사진이 다운로드됐을 때 자동으로 blur이미지가 적용된다.
• 크기 지정 : width, height를 미리 지정해야 한다. 미리 지정해야 보여줄 수 있기에 이 속성을 지정하지 않으면 에러가 난다. 정적으로 이미지를 보여주기 때문이다.

4) 이미지 크기를 모를 경우

<figure style={{ position: 'relative', width: '500px', height: '100px' }}>
        <Image
          src="https://lecture-1.vercel.app/example.jpg"
          alt="v13 fill"
          fill
          style={{ objectFit: 'cover' }}
        />
      </figure>

위의 코드와 같이 외부 경로를 통해 이미지를 가져올 수 있다. 그렇게 되면 width와 height를 모르게 된다. 이 경우에는 fill이라는 옵션을 사용해준다.

그러면 이 이미지의 사이즈는 부모에 의해 결정된다. 부모에 position옵션을 주고 width와 height를 주면 된다.

→ 이렇게 되면 이미지가 누워져 있게 된다.

style={{ objectFit: 'cover' }}

위와 같은 속성을 주면 된다.

5) 외부 이미지 사용

외부 이미지를 사용할려고 하면 종종 오류가 발생하게 된다. 이 경우는 루트에 next.config.js파일을 설정해야 한다.

해당 파일을 들어가보면 기본 설정이 되어 있다.

images: {
    domains: ['lecture-1.vercel.app'],
  },

위와 같이 images에 domain속성을 넣어 외부 경로를 지정하면 된다. 설정이 바뀌었음으로 터미널에 변화에 대하여 설정해주어야 하니 서버를 다시 껐다가 키라고 해준다. 그러면 껐다가 다시 켜준다.

👇🏻 참고

https://web.dev/i18n/ko/browser-level-image-lazy-loading/

https://nextjs.org/docs/api-reference/next/image#lazyboundary