[Next.js] next/image 외부 이미지 이용시 Error: Invalid src prop

메모용이긴 한데..
Next.js 에서 외부 이미지 사용시 뜨는 오류이다.

 

Next.js 버전이 올라가면서 해결 방법이 바뀌어서 메모메모..

next.config.js 아래에 아래 내용을 적어주면 됩니다~

  images:{
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '~~.cloudfront.net',
        port: '',
        pathname: '/**',
      },
    ],
  }

 

hostname 정도만 이미지의 hostname으로 변경해 주시면 됩니다!