Next Images not working in production

Support
6

Resolved this issue. Posting my resolution in case someone else runs into the similar situation.

Apparently, in order to use the cloudinary loader, the loader option must be specified alongside the domains. Otherwise, it will just use the default loader. The updated nextjs config looks as following:

images: {
   loader: 'cloudinary',
   domains: ['res.cloudinary.com'],
  path: 'https://res.cloudinary.com/<cloudinary-id>/image/upload'
}

Then when using the image, relative paths must be used:

<Image alt="some image" width="30" height="30" src="/relative/path/to/image/on/cloudinary" />

If you want to use default loader and not use the cloudinary loader then sharp needs to be installed. The default loader seems to use sharp in production. By default its already installed in Vercel. However, its not available in Netlify it needs to be installed as external node modules by specifying in netlify.toml
File-based configuration | Netlify Docs i.e.

[functions]
  node_bundler = "esbuild"
  external_node_modules = [ "@ampproject/toolbox-optimizer", "sharp"]
2 Likes