Upgrading NextJS 12 to 14 (Part 2: next/image)

After successfully updating the `next/link` component, the next major milestone in modernizing this portfolio from Next.js 12 was tackling `next/image`.

In Next.js 13 and 14, the legacy `next/legacy/image` component was completely overhauled in favor of standard, native HTML `<img>` output without wrapped `<span>` elements.

Key Changes Encountered

• **Removal of Wrapper Spans**: The old `next/image` generated nested `<span>` containers with base64 placeholder GIFs and absolute positioning. The new component renders a native `<img>` with modern CSS attributes.
• **Simplified Layout Props**: `layout="responsive"` and `layout="fill"` were replaced by standard CSS styling and the boolean `fill` prop.
• **Improved Core Web Vitals**: Eliminating the wrapper elements significantly improved Largest Contentful Paint (LCP) and reduced DOM node count across the site.

// Before (Next 12)

// After (Next 14+) <Image src="/photo.jpg" width={800} height={500} className="w-full h-auto" alt="Description" /> ```

By migrating to the modern image component, our page payloads became lighter, cleaner, and strictly compliant with modern accessibility standards.