next/image hostname error

Image 를 사용시에 hostname 관련 이슈가 발생시 해결법은 next.config.js에 해당 설정을 통해 아래와 같이 도메인을 등록해주면 된다. 아래 예는 github avatar 도메인과, 로컬테스트용 도메인인 localhost를 넣었다.

예로 사용했던 url은 http://localhost:3065/blob-1620401601365.svg이다.
(위에 사진은 127.0.0.1로 바꿔서 테스트해봤던 이미지.)

//next.config.js
module.exports = {
  ...
  images: {
    domains: ['avatars.githubusercontent.com', 'localhost']
  },
  ...
}

참고링크

• https://github.com/vercel/next.js/discussions/18311