Next/Image 사용하기

In9_9yu·2023년 5월 27일

모두의 배드민턴

mobae

목록 보기

4/9

🎯 목표

기본 img 태그를 Image 태그로 전환하기 를 처리하면서 겪은 내용입니다.

Next/Image를 이용하여 이미지를 최적화 해보기

eslint-disable @next/next/no-img-element 없애기

🩺 처한 상황

현재는 3개의 페이지에서만 이미지를 불러와서 사용합니다.

메인 페이지
라켓 목록 페이지
라켓 통계 페이지

3개의 페이지에서 이미지를 불러와서 사용하고 있지만, 메인 페이지의 이미지가 중복되어 사용되는 경우가 많았습니다.

따라서 우선 메인페이지에 적용되는 이미지들만 Next/Image 태그로 교체해보려고 합니다.

🌚 기존 코드 (절망편)

// 이미지의 저작권 문제때문에 src를 임의의 링크로 바꾸었습니다.
<div>
  <img
	className="rounded-md h-36 md:w-[280px] md:h-[280px]"
    alt="racket"
    src="racket.image.com/racket1.jpg" 
  />
</div>

다음과 같은 img 태그를 Next/Image 태그로 바꿔보겠습니다.

<div>
  <Image
	className="rounded-md h-36 md:w-[280px] md:h-[280px]"
    alt="racket"
    src="https://racket.image.com/racket1.jpg"
  />
</div>

단순히 태그만 바꾸게되면 에러가 발생합니다. 아래 에러를 해결하기 위해 width와 height 속성을 작성해 줍시다.

width error

height error

<div>
  <Image
    width={280}
    height={280}
	className="rounded-md h-36 md:w-[280px] md:h-[280px]"
    alt="racket"
    src="https://racket.image.com/racket1.jpg"
  />
</div>

이렇게 작성하고, 다시 실행해보면 또 다른 오류가 나타납니다.

domain error

공식 문서에도 잘 나와있듯이, 외부 이미지를 가져다 쓰기 위해서는 next.config.js에 domain을 등록해야합니다.

const nextConfig = {
  ...,
  images: {
    domains: ["racket.image.com"],
  },
};

그렇다면 결과는?

~~뭐야 이거 왜이래~~

next 앱을 띄우고 있는 콘솔에 다음과 같은 로그가 뜨는 걸 볼 수 있습니다.

upstream image response failed for https://racket.image.com/racket1.jpg 403

네트워크 탭으로 이동해서도 문제를 보도록 합니다.

"url" parameter is valid but upstream response is invalid

결론부터 말하자면, 왜 그런지는 아직도 모르겠습니다.

403 에러는 권한이 없는 경우에 돌려주는 상태코드입니다.
정말 권한 문제라면, 이미지 리소스를 요청하는 모든 경우에 대해 똑같이 403을 돌려줄 것이라고 예상됩니다.
https://racket.image.com/racket1.jpg 해당 url을 직접 브라우저에 입력하는 경우는 이미지를 제대로 보여줍니다.
Next/Image를 사용하는 경우에는 다음과 같이 요청을 합니다.
- http://localhost:3000/_next/image?url=https://racket.image.com/racket1.jpg&w=384&q=75
- 이 과정에서 문제가 있는게 아닐까 추측만 해봅니다.

이 문제에 대해 여러 문서들을 찾아보았지만, 마땅한 해결책은 없었습니다.
(있다면 알려주세요 🤣)

🌞 기존 코드 (희망편)

메인 페이지에서는 이미지를 사용하는 부분이 하나 더 있습니다.
바로 Youtube 비디오 리스트를 불러오는 부분입니다.

YoutubeList

// YoutubeVideo.tsx

<div className="flex justify-center">
	<img
		width={320}
		height={180}
		className="object-cover"
		src={snippet.thumbnails.medium.url}
        alt="thumbnail"
	/>
</div>

Youtube data api를 통해 배드민턴을 검색했을 때 나오는 상위 10개의 목록을 반환받습니다. 데이터는 thumbnail 이미지의 링크가 포함되어 있습니다.

이미 width와 height를 정의해 놓은 상태이므로, next.config.js에서 domain만 추가해보도록 하겠습니다.

const nextConfig = {
  ...,
  images: {
    domains: ["i.ytimg.com"],
  },
};

// YoutubeVideo.tsx
<div className="flex justify-center">
	<Image
		width={320}
		height={180}
		className="object-cover"
		src={snippet.thumbnails.medium.url}
        alt="thumbnail"
	/>
</div>