El Problema (Para el Recruiter)
Mientras desarrollaba mi portafolio, la web funcionaba perfectamente, pero la "consola de desarrollador" (un panel que los técnicos usamos para depurar) estaba llena de avisos amarillos (warnings).
Avisos como legacyBehavior is deprecated... o ...missing "sizes" prop. Un cliente o un usuario normal nunca vería esto. Sin embargo, un reclutador técnico o un compañero desarrollador SÍ lo vería, y una consola "sucia" da una imagen de descuido o de "deuda técnica".
El Dilema: Si la web "funciona", ¿merece la pena dedicar tiempo a arreglar algo que el usuario final no ve?
La Solución (Para el Desarrollador)
Decidí investigar cada warning. Next.js no los pone por capricho; los pone porque está intentando ayudarte a mejorar el rendimiento (los Core Web Vitals de Google).
1. Arreglando legacyBehavior en <Link>
El primer warning era por usar la sintaxis antigua de <Link>, que obligaba a poner una etiqueta <a> dentro.
// ANTES (Con warning)
<Link href="/contacto" legacyBehavior>
<a className="mi-estilo">Contacto</a>
</Link>
// DESPUÉS (Limpio y moderno)
<Link href="/contacto" className="mi-estilo">
Contacto
</Link>
La nueva sintaxis es más limpia y semántica.
2. Arreglando fill y sizes en <Image>
El warning más importante era sobre las imágenes. Usar layout="fill" y objectFit está obsoleto. La nueva sintaxis fill y className="object-cover" es mejor, pero Next.js te "exige" un paso más: la propiedad sizes.
// ANTES (Con warning)
<Image
src="/mi-foto.png"
alt="foto"
layout="fill"
objectFit="cover"
/>
// DESPUÉS (Optimizado)
<Image
src="/mi-foto.png"
alt="foto"
fill
className="object-cover"
sizes="(max-width: 768px) 100vw, 33vw"
/>
Esa línea de sizes le dice al navegador: "En pantallas pequeñas (móviles), la imagen ocupará el 100% del ancho; en pantallas grandes, ocupará el 33%". Esto permite a Next.js cargar una imagen mucho más pequeña y ligera en móviles, mejorando drásticamente la velocidad de carga.
La Lección Aprendida
El código limpio no es solo código que funciona, es código que rinde bien. Los warnings son "deuda técnica" gratuita que el framework te está señalando. Escucharlos y arreglarlos te ahorra problemas de rendimiento en el futuro.