next/image 사용 시, Invalid src prop 에러

[punchdrunkard]

next/image 사용 시, Invalid src prop 에러

next.config.js 에서 hostname 다음에 오는 링크를 설정한다.

• 해결 방안 :

module.exports = {
  reactStrictMode: true,
// 이곳에 에러에서 hostname 다음 따옴표에 오는 링크를 적으면 된다.
  images: {
    domains: ['cdn.pixabay.com'] 
  }
}

• 논의 내용 : 하지만 api 로 부터 받아오는 image 의 end point가 다양할 것이라고 예상되어, netx/image보다 antd의 Image 컴포넌트를 사용하도록 한다.

• 참고 자료

  [ERROR] Error: Invalid src prop "" on next/image

[punchdrunkard]

추가 내용

nextJS를 사용하는 경우, 상당부분의 이미지 최적화에 next/image를 이용할 수 있습니다.
또한 더미데이터가 아닌 실제 프로젝트에서 이미지 도메인이 정해져 있으므로
충분히 프로젝트에 next/image를 사용하여 최적화 할 수 있다고 생각됩니다.

[punchdrunkard]

우선 domain 에 추가하고, 제가 맡은 부분에서 성능을 분석해서 보여드리려고 했는데,
도메인 작업을 기홍님이 해주신다고 하시네요!
관련 이슈 - #223

다른 분들도 참고하실 수 있게 멘션해드리겠습니다.
기홍님은 domain 에 추가만 해주시고,
적용은 컴포넌트 만드신 분들이 점진적으로 next/image를 적용시켜보는건 어떤가요?

@gitul0515 @Hyevvy @yunjjeongjo

[gitul0515]

점진적인 적용 방식 좋습니다. 먼저 domain에 추가 후,
next/image를 정상적으로 사용할 수 있는지 테스트하고 PR 올리겠습니다.

[gitul0515]

@dar-jeeling
성능 분석은 어떤 것을 사용할 계획이셨나요? lighthouse인가요?

[punchdrunkard]

넵

[punchdrunkard]

#223

[punchdrunkard]

백엔드에서 내려오는 image의 경우

• 백엔드에서 제공하는 s3에서 내려오는 도메인과 ( devcourse-backfro-s3.s3.ap-northeast-2.amazonaws.com )
• 공공 api db에서 자체 제공하는 도메인이 있으므로 ( 공공 API: www.culture.go.kr)

이 두 도메인을 next.config.ts 에 추가 (기홍님)

refactor: next/image를 사용하기 위한 domains 추가 #225