외부 이미지 가져오기 (feat. nextjs)

프로젝트를 진행하면서 api 요청을 통해 받아온 response 중에 외부 이미지 주소가 있었는데, 해당 주소를 Next/Image의 src에 직접 전달하니까 다음과 같은 에러가 발생했다.

Next/Image 에러

기본적으로 nextjs는 nextjs에서 지원하는 Image 컴포넌트를 통해 애플리케이션의 이미지 최적화를 진행한다. Image 컴포넌트에는 필수적으로 필요한 props가 존재하는데, src, width, height, alt가 바로 그 필수적인 props에 해당한다. 오늘은 Image 컴포넌트에 대해서 자세하게 알아보기 보단, 외부 이미지를 가져오는데 집중할 것이기 때문에, Image 컴포넌트에 대해서 더 자세하게 알고 싶다면 공식문서를 참고하기 바란다. 

 

Image 컴포넌트에 필수적인 props인 src에는 다음과 같이 설명하고 있다.

출처: https://nextjs.org/docs/api-reference/next/image

외부 URL을 사용하는 경우에는 next.config.js 파일에서 remotePatterns를 추가해주어야한다.

그럼 이제 공식문서에 명시되어 있는 것처럼 외부 이미지를 사용할 수 있게 next.config.js를 수정해보도록하자.

 

next.config.js 이란?

next.config.js 파일은 nextjs 프로젝트를 생성하게 되면 자동으로 생성되는 파일로, 애플리케이션의 환경 설정과, 커스텀한 애플리케이션 설정을 위한 파일이다.

 

외부 이미지 경로 설정

로컬환경이 아닌 외부의 이미지를 가져와서 사용하는 경우 악의적인 사용자로 부터 애플리케이션을 보호하기 위해 next.config.js 에서는 특정 외부 도메인에 해당하는 이미지만 사용할 수 있도록 설정이 가능하다. 관련 옵션으로는 remotePatterns와 domains가 있다.

 

remotePatterns

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'xxx.xxx.com',
      },
    ],
  }
};

module.exports = nextConfig;

remotePatterns 옵션은 위와 같이 외부 도메인을 설정해줄 수 있고, 특정 포트에 대해서만 경로를 설정해 줄 수있다. 추가적으로 remotePatterns 옵션은 와일드 카드를 통해 여러 서브 도메인에 대해서 외부 경로를 설정해 줄 수있는데, 위 옵션에 설정한 내용 중, 프로토콜, 호스트 이름, 포트 번호, 서브 도메인 등 하나라도 일치하지 않는 경우에는 400 에러가 발생한다.

 

domains

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['xxx.xxx.com'],
  }
};

module.exports = nextConfig;

domains 옵션도 외부의 이미지를 사용할 수 있도록 외부 도메인을 설정할 수 있는데, remotePatterns 옵션과 다르게 와일드 카드를 통한 서브 도메인을 지원하지 않고, 프로토콜, 경로 이름, 포트 번호 등을 타이트하게 제한하는 것이 불가능하기 때문에 remotePatterns 옵션을 사용하는 것을 권장하고 있다.

 

이렇게 두 방법을 사용하면 외부 도메인를 Image 컴포넌트의 src props에 넘겨주어도, 정상적으로 외부 이미지를 사용할 수 있게 된다.

이외에 next 자체에서 제공하는 Image 컴포넌트의 다양한 요소에 대해서도 자세히 다루는 포스팅도 써보도록 하겠다.