넥스트 이미지 컴포넌트 cdn 이미지 불러오기

cdn 주소를 env파일에 담아놓고 path parameter만 바꿔 이미지 컴포넌트 src에 pass 했다.

 <Image
  className="object-contain"
  src={`${process.env.NEXT_PUBLIC_CDN_IMAGES}therfect/therfect_entire_robot.png`}
  priority
  fill
  alt="entire_robot_env"
  />

그런데 어떤 짓을 해도 503이 안 없어지는 것이다. 그래서 사수님께 여쭤보았고 아주 빠르게 해결해주셨다. loader를 사용하는 것이다.

 <Image
  className="object-contain"
  src={`${process.env.NEXT_PUBLIC_CDN_IMAGES}therfect/therfect_entire_robot.png`}
  priority
  fill
  alt="entire_robot_env"
  loader={({ src }) => src}
  />

loader는 url string에 계산된 값을 dynamic하게 입력해야할 때 쓰는 prop이다. 하지만, 이 상황에선 env 변수가 스코프안에 선언됨으로써 딱 필요한 시점에 정확하게 url을 읽도록 하기 때문에 503에러가 나지 않는 것 같다.

usage

import Image from 'next/image'

const customLoader = ({ src, width, quality }) => {
  return `https://s3.amazonaws.com/image/${src}?w=${width}&q=${quality}`
}

const MyImage = props => {
  return (
    <Image
      src='profile.webp'
      width={300}
      height={300}
      alt='User profile'
      quality={80}
      loader={customLoader}
    />
  )
}

출처 : https://mycodings.fly.dev/blog/2022-09-08-all-about-nextjs-image-component