Next.js에서 S3 이미지가 안 보이는 오류 (feat. next/image)

 

프로젝트에서 유저 프로필을 수정할 수 있는 마이페이지를 만들고 있었는데,
백엔드에서 받은 S3 이미지 URL을 next/image 컴포넌트로 보여주려고 하자 아래와 같은 에러가 똬악...!

 

 

찾아보니 next/image는 외부 이미지 URL을 사용할 때, 보안상의 이유로 도메인을 명시적으로 등록해줘야 한다고 한다!

✅ 해결 방법

프로젝트 루트의 next.config.js 파일 수정하기

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  reactStrictMode: false,
  images: {
    domains: ['pickmate-bucket.s3.ap-northeast-2.amazonaws.com'],
  },
}

export default nextConfig

 

 

위 설정 후 다시 pnpm dev를 통해 개발 모드를 재시작하면 된다!

 

이미지가 잘 보인다^^.. 🎉 🎉