Next.js next/image 컴포넌트의 'Invalid src prop' 에러

1. 개요

 노마드 코더의 캐럿마켓 클론코딩 강의를 수강하던 중 처음 보는 에러를 만났다.

 

 

이 꽃은 pixabay에서 다운로드 한 꽃 이미지이다. 학습을 위해 다운로드한 이 이미지를 이용해 상품을 간단히 등록한 후, 상품 상세 페이지로 이동해보았다.

 

 

Error: Invalid src prop (https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/2ChocolateChipCookies.jpg/250px-2ChocolateChipCookies.jpg) on `next/image`, hostname "upload.wikimedia.org" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

 

그랬더니 이런 에러가 발생했다. 무슨 에러인지 검색해보니, 이 에러는 next/image 컴포넌트가 이미지 URL의 호스트네임을 허용된 도메인으로 인식하지 못했을 때 발생한다는 것을 알게 되었다. 

 

2.  원인

 

 

 Next.js의 next/image 컴포넌트는 성능 최적화를 위해 이미지를 특정 호스트에서만 로드하도록 구성하도록 되어 있다. 그래서 이를 위해서는 외부 호스트 이미지를 허용하기 위해, 이에 대한 명시적인 설정이 필요하다. 그리고 현재 프로젝트에서는 test01이라는 유저의 avatar 이미지 url이 위키피디아의 쿠키 이미지로 설정되어 있고, 이 도메인이 next.config.js 파일의 설정에 포함되어 있지 않았기에 발생한 문제였다.

 

3. 해결

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "avatars.githubusercontent.com",
      },
      {
        protocol: "https",
        hostname: "upload.wikimedia.org",
      },
      {
        hostname: "imagedelivery.net",
      },
    ],
  },
};

export default nextConfig;

 

 위 코드처럼 next.config.js 파일에 에러에서 알려준 도메인(upload.wikimedia.org)을 추가하였다. hostname에 upload.wikimedia.org를 추가한 후 서버를 다시 시작하는 것으로 Next.js가 이 도메인의 이미지를 로드할 수 있도록 허용할 수 있었다. 이 때, protocol을 별도로 설정하지 않으면 기본적으로 모든 프로토콜(http, https)을 허용하게 된다. 그렇기에 보안상 필요하다면 protocol을 명시하는 것이 좋다.

 

4. 결론

• Next.js의 next/image 컴포넌트를 이용할 때 외부 이미지를 불러오기 위해서는 도메인 설정이 필요
• 이를 통해 성능 최적화 및 보안을 유지하며 외부 이미지를 효율적으로 사용 가능
• 도메인 설정은 next.config.js 파일에서 설정 가능
•  

---

- 위키피디아 쿠키 이미지

- Next.js 공식 문서