Image Optimization returns 403 on Vercel

[yourfavvgamifyyy]

Summary

next/image works locally, but on Vercel I get 403 or broken images. What is the correct images.domains or remotePatterns config to allow external images?

Additional information

No response

Example

No response

[ahuaiqom]

The image’s origin domain isn’t allow-listed (or the origin blocks hotlinking). Add the host to images.domains (simple) or use images.remotePatterns (granular). If the origin blocks Vercel’s optimizer, proxy the image through your app.

✅ Allow-list the image host

next.config.js (simple host allow-list)

// next.config.js
module.exports = {
images: {
domains: [
"images.unsplash.com",
"cdn.example.com",
"lh3.googleusercontent.com",
],
},
};

next.config.js (granular patterns)

// next.config.js
module.exports = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "images.unsplash.com",
pathname: "/photo-",
},
{
protocol: "https",
hostname: "cdn.example.com",
pathname: "/products/",
},
{
protocol: "https",
hostname: ".example.org", // any subdomain
pathname: "/media/",
},
],
},
};

After changing next.config.js, redeploy.

🧪 If it’s still 403

Hotlink protection / required headers: Some CDNs require a Referer or block non-browser fetches.
→ Proxy via a Route Handler/API route and point next/image to your proxy URL.

Protocol/host mismatch: The runtime URL must exactly match what you allow-listed (https vs http, www. vs bare, correct subdomain).

Static export: If using next export, image optimization isn’t supported:

// next.config.js
module.exports = { images: { unoptimized: true } };

SVGs: next/image doesn’t transform remote SVGs; serve them directly (or ).

✅ Minimal working example
import Image from "next/image";

export default function Hero() {
return (
<
src="....."
alt="Product"
width={1200}
height={630}
priority
/>
);
}

[icyJoseph]

This should've failed locally too no? What was answered by this @yourfavvgamifyyy ? did you just unoptimize the whole thing?