Next.js 'hostname not configured' error: fix it in next.config.ts, not your CSP
Next.js throws a runtime error when next/image tries to render an image from a remote host not listed in the images.remotePatterns allowlist in next.config.ts. The restriction is intentional: since Next.js fetches source images server-side to optimize them, allowing arbitrary URLs would turn the optimizer into an open proxy. The fix requires adding the correct protocol, hostname, port, and pathname to remotePatterns, then restarting the dev server, which reads the config only once at startup. Optimized images are served from the same origin via /_next/image, so no CSP changes are needed. The older images.domains setting is deprecated since Next.js 14 and slated for removal, making remotePatterns the correct approach going forward.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in