CodePark/ questions / Images, fonts & performance
START PRACTICINGPRACTICE
Frontend question · Next.js › Images, fonts & performance

<Image src="https://cdn.example.com/a.jpg" ... /> throws an error about an unconfigured host. What is the fix?

Add the host to images.remotePatterns in next.config

Adding the host to images.remotePatterns in next.config is correct. For security, the image optimizer only processes remote images from hosts listed there. This stops other people from using your server to optimize any URL they like. The tempting NEXT_PUBLIC_IMAGE_HOST environment variable is wrong: Next.js does not read image hosts from such a variable.