[error] next/image Un-configured Host

설명

next/image 컴포넌트의 src 속성에 정의되지 않은 URL 의 호스트 이름을 사용하는 값을 사용했을 때 오류 발생

기본적으로 로컬 public 경로를 제외한 외부 경로를 사용하려 하면 next.config 파일에 사용할 URL 패턴을 정의해 사용 가능하다.

단순히 외부 URL 패턴을 추가하는 것이므로 기존에 로컬 경로로 쓰던 방식 또한 사용가능하다.

코드

// next.config
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'assets.example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
  ...
}

---

참고

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