Solución: Invalid src prop en next/image — hostname no configurado

¿Por qué ocurre?

El componente `next/image` optimiza imágenes automáticamente, pero para evitar que se use como proxy de cualquier URL, Next.js requiere que declares explícitamente qué dominios externos están permitidos. Si usas una URL de un dominio no declarado, lanza este error.

Solución paso a paso

Solución — añadir el hostname en next.config.js:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        pathname: '/tu-cuenta/**', // opcional: limitar a una ruta
      },
      {
        protocol: 'https',
        hostname: '**.supabase.co', // wildcard para subdominios
      },
    ],
  },
};module.exports = nextConfig;

Reinicia el servidor de desarrollo después de cambiar next.config.js:

# Ctrl+C para parar, luego:
npm run dev

Forma antigua (domains) — desaconsejada desde Next.js 13:

// ⚠ Deprecated desde Next.js 13, usa remotePatterns
images: {
  domains: ['images.unsplash.com', 'res.cloudinary.com'],
}

Si la imagen es local (en /public):

// Las imágenes locales no necesitan configuración
import Image from 'next/image';
import miImagen from '../public/foto.jpg'; // import directo
// O con ruta string desde /public:

Si la URL es totalmente dinámica y no puedes saber el dominio:

// Usa un  normal — pierdes la optimización pero es válido
// eslint-disable-next-line @next/next/no-img-element

Cómo evitarlo en el futuro

Declara los dominios de imágenes en next.config.js al principio del proyecto. Usa `remotePatterns` con wildcards para cubrir subdominios (ej: CDNs de Cloudinary o AWS S3).