Next.js | [에러] Next.js 외부 이미지 사용 에러(Error: Invalid src prop)

Unhandled Runtime Error
Error: Invalid src prop (https://storep-phinf.pstatic.net/ogq_618430508a376/original_7.png?type=p100_100) on next/image, hostname "my-walklog.s3.ap-southeast-2.amazonaws.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Next.js에서 외부 이미지 데이터를 불러와 Image 컴포넌트로 사용할 때 다음과 같은 에러가 발생했다.
AWS S3에 저장한 이미지 url을 사용할 때에도 위 에러가 발생했다.

해석하면 다음과 같다.

1. next/image 컴포넌트에 전달된 src 속성의 값이 유효하지 않음
2. 이미지의 호스트 도메인 "my-walklog.s3.ap-southeast-2.amazonaws.com"이 next.config.js 파일에 구성되어 있지 않음

원인

Next.js에서 next/image 컴포넌트를 사용해 외부 호스트에서 호스팅하는 이미지를 렌더링하려면 해당 호스트를 next.config.js에 등록해야 한다.

해결

next.config.js 파일에서 images-domains에 허용하고자 하는 도메인을 설정해 준다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  
  //...다른 설정
  
  // 이미지 호스트 추가
  images: {
    domains: [
      'my-walklog.s3.ap-southeast-2.amazonaws.com',
    ],
  },
};

export default nextConfig;

여러 이미지 도메인을 등록할 수 있다.
저장한 뒤, 만약 npm run dev로 실행 중이었다면 종료 후 재실행해야 적용되는 것을 볼 수 있다.