[Next.js] Error: Invalid src prop on `next/image`hostname "..." is not configure 에러 해결하기 / next.config.js 이미지 도메인 설정

Error: Invalid src prop (https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80) on `next/image`, hostname "images.unsplash.com" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
프로젝트 내부에 저장해 둔 사진이 아닌 외부 소스 사진을 가져오면 보게 되는 에러 메시지이다. 

에러 메시지를 보면 'next.config.js'를 언급하고 있다. 그리하여 에러를 해결하기 위해 next.config.js를 수정해 줄 것이다.
 

👀 Next.js 12.3.0 이후 버전 사용 기준

next.config.js

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
        port: '',
        pathname: '/*',
      },
    ],
  },
}

위와 같이 images : { remotePatterns: ...}} 내에서 사용하고자 하는 이미지의 src에 따라 protocol, hostname, port, pathname을 설정해주면 된다. 내가 사용하고자 하는 이미지의 주소는 "https://images.unsplash.com/photo-..." 이러하다. 그리하여 위와 같이 hostname : 'images.unsplash.com', pathname: '/*' 으로 설정해 주었다. 
 

next.config.js 설정 후 이미지를 잘 불러오는 것을 확인할 수 있다. 
 

👀 Next.js 12.3.0 이전 버전 사용 기준

next.config.js에 images: { domains: [...] } 내에 사용하고자 하는 외부 이미지 주소 domain을 추가하면 된다

// next.config.js
images: {
    domains: ['images.unsplash.com'],
},

---

 
관련 공식 문서

next-image-unconfigured-host | Next.js

 
도움이 되셨다면 하트 한번만 눌러주세요 🩷