[Next.js] image URL 사용(Amazon S3)

이미지를 업로드하고 Amazon S3에 저장하고 백엔드로부터 Image URL을 성공적으로 받았다는 가정하에 이루어진다.

Image URL은 다음과 같은 형식으로 받을 수 있을 것이다.

image_URL: "https://{s3저장소 이름}.s3.ap-northeast-2.amazonaws.com/{이미지 파일 이름}"

Image URL을 사용하기 위해서는 우선 next.config.js를 수정해줘야 한다.
다음과 같이 도메인 주소를 추가해준다.

// next.config.js
module.exports = {
	images: {
    	domains: ['{s3저장소 이름}.s3.ap-northeast-2.amazonaws.com']
    }
}

기본 사용 코드는 다음과 같다.

// prifile.ts
const imageURL = 'https://{s3저장소 이름}.s3.ap-northeast-2.amazonaws.com/{이미지 파일 이름}'
const [image, setImage] = useState('/blank.png') // 기본 이미지

// imageURL이 있으면 imageURL을 사용, 없으면 초기값 유지
useEffect(() => {
	if(imageURL) setImage(imageURL)
}, [image, imageURL])

return(
	<Image src={image} width={150}, height={150} alt='프로필 이미지 입니다.' />
)

이상 끝!

출처
스택오버플로우