Next.js Image 컴포넌트 사용하기

Next.js 프로젝트 중, 이미지를 외부 경로에서 가져와 사용했다.

처음엔 <img /> 태그로 이미지를 표현했다.

외부에서 가져와서 그런지.. 이미지 로딩되는 속도가 불편했다.

마침 Next.js 공식 문서에 Image 최적화 관련 문서가 있었다.

(https://nextjs.org/docs/api-reference/next/image)

<Image /> 컴포넌트는 Next.js 에서 제공하는 이미지 최적화 컴포넌트 라고 생각하면 편하다. <img /> 를 사용하는 것보다 자체적으로 제공하는 기능이 많아서 사용해보려고 한다.

<Image /> 컴포넌트에 필수적으로 들어가야하는 Props 는 src, width, height 가 있다.

Props 는 보이는 그대로 입력하면 되지만, 만약 이미지의 경로가 외부라면? 그대로 사용하면 에러가 발생한다.

내가 사용한 url 이 나오고 next.config.js 어쩌구 하는 내용인데, 공식문서에도 나와있지만 next.config.js 를 수정해줘야 한다.

// next.config.js
module.exports = {
  images: {
    domains: ['assets.example.com'], // 이미지 경로의 도메인
  },
}

<Image /> 안에는 여러 옵션들이 있지만 필수적으로 저부분만 추가하면 사용할 수 있다.

결과적으로 이미지를 불러왔을 때 훨씬 빠르게 가져올 수 있었다.