@raphaelbs I had a similar issue, in that it worked locally but not in prod, and it turned out my next.config.js file was not copied into my prod docker container. So i’d double check you’re definitely deploying the next.config.js file.

I want to share my case.

If you use docker and refer to official docs from nextjs https://nextjs.org/docs/deployment#docker-image you need to uncomment this line, to make sure next.config.js file is available. # COPY --from=builder /app/next.config.js ./

Just to share my case too.

on next.config.js,

images: {
  domains: ["images.example.com"],
},

i didn’t add https://.

then on the Image component:

I used the ImageLoader like in the docs:

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://images.example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

At first, i just tried putting the image url on the src of the Image component, but it turns out, just putting its base url in the domain part of the config seems to not be enough. It still just tries to get the image from the domain of your app. So using the loader lets you configure it correspondingly.

Just to share what happened in my case.

I assigned a base URL (together with protocol) instead of a hostname (without protocol)

module.exports = {
  images: {
    domains: ['https://mydomain.com'],
  },

Changing https://mydomain.com to mydomain.com fixed the issue.

I got this issue after deploying Next.js app to firebase hosting with firebase functions…

As far as I understand, nextjs optimize images wrapped by <Image> on runtime. Which means adding next.config.js requires all other dev dependencies (e.g., next-compose-plugin, …) and source code (style.less if we do use less) , I am not sure about adding next.config.js for production.

Might need to split next.config.js for build and production (runtime, which only includes image configuration)

That was it @badsyntax, thank you!

@mshahzaib101 did you find any solution? Image works fine on local but fails after deployment. In my case I deployed to GAE.

@maurusrv if you use a custom loader on the Image component then none of the images.domains configuration in next.config.js matters.

For anyone running into this on Netlify, add the domains as an env variable ‘NEXT_IMAGE_ALLOWED_DOMAINS’. Theres a note about it in the deploy script, but no error is thrown so it’s not obvious you’d need to look there.

@mshahzaib101 It did work on my project finally. The problem was to include ‘domain’ in next.config.js. Link.

For me I have a lerna project setup, so I had next.config.js for each project and one next.config.js on the root as well. I previously had included ‘domain’ on each projects’s next.config.js. But I actually need to put it in the root next.config.js. Hope this helps 😄

@dipesh429 no man, didnt get the solution yet…