[Next.js] 트러블 슈팅 - 외부 호스트 이미지 삽입(Error: Invalid src prop (https://...) on `next/image`, hostname "..." is not configured under images in your `next.config.js`)

next.js에서는 각종 기능을 제공하는 Image태그를 빌트인으로 제공한다.

 

이때 Image에 외부 호스트의 파일을 넣으려면 설정이 필요하다. 나 같은 경우 이미지 클라우드 서버를 허용해줘야한다.

 

즉 next.config.js에를 아래처럼 구성한다

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "res.cloudinary.com",
        port: "",
        pathname: "/내 경로 패턴/내 경로 패턴2/**",
      },
    ],
  },
};

module.exports = nextConfig;