[에러 해결 ]Next.js Image 에러 - Error: Invalid src prop hostname "~~~" is not configured under images in your `next.config.js`

next.js에서
유튜브의 썸네일 링크를 뽑아내 썸네일을 보여주려고 시도했다.

먼저 테스트로 만들어놓고 이미지 소스 작성

Image 를 사용하기 위해서 'next/image' 임포트

실행 후 들어가보니까 에러가 났다

Error: Invalid src prop (https://i.ytimg.com/vi/u8wu6fDGK44/maxresdefault.jpg) on next/image, hostname "i.ytimg.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에 도메인을 추가해줘야 하는 것 같았다
https://nextjs.org/docs/messages/next-image-unconfigured-host

next.config.mjs 에 도메인 추가했더니 쉽게 해결

아래처럼 이미지가 잘 나온 것을 볼 수 있다