[Next.js] <Image/> 컴포넌트 허용 외부 도메인 추가하기

배경

https://iu123456px34jqvq.supabase.co/storage/v1/object/public/

필자는 위 외부 도메인의 하위에 존재하는 모든 경로를 허용하려고 합니다.

이를 위해서는 아래 예시 코드와 같이 작성 후 서버를 재시작 해야합니다.

 

예시 코드

next.config.ts

const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'iu123456px34jqvq.supabase.co',
        port: '',
        pathname: '/storage/v1/object/public/**',
      },
    ],
  },
}

module.exports = nextConfig