[Error][Next.js] Invalid src prop ~ on `next/image` 해결 방법/ 외부 이미지 허가 설정하기

 

🚨상황

Invalid src prop (https://image.tmdb.org/t/p/w185/9BJxdhi4tuiQdgT8bfDuiPipnsx.jpg)
 on `next/image`, hostname "image.tmdb.org" is not configured under images in your `next.config.js`

 

 

원인 

외부 이미지에 대한 호스트가 구성되지 않았다.

 

 

 

해결법

next.config.js 파일을 생성하여 외부에서 불러올 이미지에 해당하는 hostname을 작성해준다.

(아래 코드는 Next.js 14버전 기준으로 작성되었습니다.)

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "image.tmdb.org",
      },
    ],
  },
};

 

 

 

<참고자료>

https://nextjs.org/docs/messages/next-image-unconfigured-host

`next/image` Un-configured Host