728x90

프로젝트에서 유저 프로필을 수정할 수 있는 마이페이지를 만들고 있었는데,
백엔드에서 받은 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를 통해 개발 모드를 재시작하면 된다!
이미지가 잘 보인다^^.. 🎉 🎉

'🫂이모저모 > 👊🏻에러 일지' 카테고리의 다른 글
| [firebase 인증 오류] firebase: error (auth/invalid-credential). (1) | 2024.11.30 |
|---|---|
| ReferenceError: document is not defined (feat. Next.js + lottie) (2) | 2024.08.14 |
| CORS 오류 해결하기 (0) | 2024.06.03 |
| Parsing error: Cannot find module 'next/babel' (0) | 2024.05.27 |