외부 호스트의 이미지 사용하기

Error

Error: Invalid src prop (https://firebasestorage.googleapis.com/~~~~~~) on `next/image`,
hostname "firebasestorage.googleapis.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Next.js에서 next/image 컴포넌트를 사용해 외부 호스트에서 호스팅하는 이미지를 렌더링하려면 해당 호스트를 next.config.js에서 허용을 해야한다!
next.js에서는 보안을 위해서 허용되지 않는 호스트에서 이미지를 로딩하려고하면 시도하면 오류 메세지가 출력된다.

해결

module.exports = {
  images: {
    domains: ['firebasestorage.googleapis.com'],
  },
}

next.config.js 파일에서 허용 목록에 추가하면 된다!