cloudinary 이미지 업로드 중 오류 발생하는 경우

오류

Unhandled Runtime Error
Error: Invalid src prop (https://res.cloudinary.com/{CLOUD_NAME}/image/upload/v1707107523/{FILE_NAME}.png) on `next/image`, hostname "res.cloudinary.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

 

 

발생하는 이유

위 오류가 발생하는 이유는 외부 경로의 이미지를 불러오려고 할 때 정상적으로 불러오지 못해 생기는 오류이다.

 

좀 더 이해하기 쉽게 비유를 들어 설명해보자면

내 필요에 의해 집으로 누군가를 초대했지만 아직 문을 열어주기 전이어서 상대방이 들어오지 못하고 있는 상태라고 표현하면 좀 더 이해하기 쉬운 비유가 될 것 같다.

 

이를 해결해주기 위해서는 내 집에 들어올 수 있도록 문을 열어주는.. 아래와 같은 설정을 통해 불러올 수 있도록 허용해주는 과정이 필요하다.

 

🔥 오류메세지를 잘 읽어보면 친절하게 해결방법을 알려주고 있다.

 

 

해결 방법

설정해주어야 하는 파일과 설정값은 다음과 같다.

 

next.config.mjs

const nextConfig = {
  images: {
    domains: ['res.cloudinary.com'],
  },
};

 

 

처음 프로젝트 생성 이후 한 번도 건드린적이 없다면 다음과 같이 초기 세팅이 되어있을 것이다.

const nextConfig = {
}

 

nextConfig 상수 변수에 빈 객체가 할당되어 있을텐데, 여기에

images: {
  domains: ['res.cloudinary.com'],
},

 

위 값을 추가해주면 된다.

 

 

값을 추가해주었다면 새로고침을 통해 다시 이미지를 업로드해 확인해보면 정상적으로 동작되는 것을 확인할 수 있다.