Error: Invalid src prop on `next/image`

Workarounds

1. 95% success Add the domain to images.remotePatterns in next.config.js

   images: { remotePatterns: [{ protocol: 'https', hostname: 'example.com' }] }

   Sources: https://nextjs.org/docs/app/api-reference/components/image#remotepatterns

2. 90% success Use unoptimized prop for external images or configure remotePatterns

   // For a single external image that can't be optimized:
   <Image src={url} alt="desc" width={800} height={600} unoptimized />
   
   // Or configure remotePatterns in next.config.js:
   module.exports = {
     images: {
       remotePatterns: [
         { protocol: 'https', hostname: '**.amazonaws.com' },
         { protocol: 'https', hostname: 'cdn.example.com' }
       ]
     }
   }

   Sources: https://nextjs.org/docs/app/api-reference/components/image#unoptimized

3. 88% success Install sharp as a dependency for better image optimization

   npm install sharp
   # sharp is auto-detected by Next.js for image optimization
   # Required in production/Docker — Next.js uses squoosh by default in dev
   # For Docker, add to Dockerfile:
   # RUN npm install sharp

   Sources: https://nextjs.org/docs/app/building-your-application/optimizing/images#sharp