NextJS Image Tag Error: Invalid src prop 해결하기

해당 에러는 NextJS의 이미지를 태그를 이용해 외부 링크의 이미지를 불러오려고 하면 발생하는 에러이다.

이 에러는 생각보다 간단하게 해결할 수 있다.

// next.config.js

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

나의 경우 firebase의 storage를 이용하기에 해당 도메인을 입력해 줬는데 다른 링크의 주소에서 가져온다면 해당 링크의 주소를 입력해주면 된다.

 

주의해야 할 점을 몇 가지 쓰자면

1. next.config.js에 다른 요소들도 추가 설정을 했을 때 웬만하면 가장 먼저 images 설정을 하지 않으면 인식하지 못하는 문제가 발생했다.
2. images에 여러 옵션이 있는데, 그 중 loader옵션을 사용할 경우 domains옵션을 무시한다.
3. loader옵션을 사용할 경우 path옵션을 사용해 불러오려는 이미지 주소의 접두사를 써줘야 한다.