Next.js 14 Image Component with Cloudflare R2 Throws ECONNREFUSED Error

Question

'm trying to use the Next.js Image component to load images from my Cloudflare R2 storage, but I'm encountering a connection error. Despite configuring the next.config.js to include the public URL of my Cloudflare R2 bucket, I keep receiving an ECONNREFUSED error.

Here's the error message:

Error: connect ECONNREFUSED
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1571:16) {
  errno: -61,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '', port: 443
}

And this is my next.config.js configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "pub-hidden.r2.dev",
        port: "",
        pathname: "/**",
      },
    ],
  },
};

module.exports = nextConfig;

I've verified that the hostname (pub-hidden.r2.dev) is correct and corresponds to my public Cloudflare R2 bucket URL. However, I'm unsure why the connection is refused. Here are a few points for consideration:

The error does not specify an address, which is puzzling. I'm not using a custom domain; I'm using the provided r2.dev domain. My Cloudflare R2 bucket is configured for public access. Could anyone help me understand what I might be missing or doing wrong? Any suggestions on how to troubleshoot or resolve this issue would be greatly appreciated