Next.js Image src 오류

오류 메세지

Error: Invalid src prop (http://localhost:3000/pages/(https://palette-image.s3.ap-northeast-2.amazonaws.com/profile/파일이름.jpeg)) on next/image, hostname "palette-image.s3.ap-northeast-2.amazonaws.com" is not configured under images in your next.config.js

1️⃣ 문제 상황 1 : 렌더링 오류

<Image> 태그에 https://palette-image.s3.ap-northeast-2.amazonaws.com/profile/파일이름.jpeg 이런 형식의 src주소를 넣어서 렌더링을 하려고 하는데 오류가 났, 공식문서를 통해 답을 구했다.

https://nextjs.org/docs/messages/next-image-unconfigured-host

2️⃣ 문제 이유

src에 쓴 url이 정의되지 않은 url의 호스트 이름을 사용하는 값을 next/image에 전달했기 때문이다. 따라서 정의를 해줘야 Image가 알아들을 수 있다.

3️⃣ 문제 해결

프로젝트 최상단에 있는 next.config.mjs파일을 찾아서 밑의 형식처럼 images.remotePatterns다음의 구성에 프로토콜, 호스트 이름, 포트 및 경로 이름을 추가합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "palette-image.s3.ap-northeast-2.amazonaws.com",
        port: "",
        pathname: "/profile/**",
      },
    ],
  },
};

export default nextConfig;

독자가 쓰려는 url파일 형식에 맞춰서 쓰면 된다.

1️⃣ 문제 상황 2 : 이미지 화질

이미지 렌더링을 성공하였지만, 고유 크기를 갖는다. 그것도 낮은 화질로..(더 정확히는 비율 x 3의 숫자에 px을 붙인 크기이다.) 본 이미지의 화질보다 훨씬 낮은 화질로 강제로 낮춰버린다. 때문에 이미지의 크기를 설정해줘도 낮은 픽셀 단위의 크기를 늘리는 행위밖에 되버리질 않아, 소용이 없었다.

2️⃣ 문제 해결

구글링을 통해 해결방법을 찾았다. Image태그의 옵션에 여러 옵션 중, sizes라는 옵션이 있었다. 이 옵션으로 고유 크기를 조절할 수 있었다.

<Image src={image} alt="img" width={100} height={100} sizes="100%"

위 코드처럼 100%를 주어서 자신의 크기에 맞게 고유 크기(화질)을 조절하게 만들었다.