nextjs-image-usage-skill

What this skill does

• Ensures all images use Next.js 16 Image component (not img tag)
• Configures remote domains in next.config.ts for external images
• Handles responsive images with proper sizing and priority
• Migrates from old Next.js versions to Next.js 16 Image API
• Implements image optimization for performance
• Configures image domains and patterns for security
• Uses proper placeholder and blur strategies
• Handles local and remote image sources correctly

LLM Code Detection and Conversion

When an LLM proposes using <img> tags in Next.js 16 code, automatically convert them to the Next.js <Image /> component equivalent.

Detection Patterns

The LLM may propose <img> tags in these scenarios:

<!-- Pattern 1: Basic img tag -->
<img src="/image.jpg" alt="Description" />

<!-- Pattern 2: With width/height -->
<img src="/image.jpg" alt="Description" width="800" height="600" />

<!-- Pattern 3: With class -->
<img src="/image.jpg" alt="Description" class="rounded-lg shadow-md" />

<!-- Pattern 4: Remote URL -->
<img src="https://cdn.example.com/image.jpg" alt="Description" />

<!-- Pattern 5: In JSX -->
<img src={imageUrl} alt={altText} />

Conversion Rules

Always convert <img> to <Image /> following these rules:

<img> Attribute	Next.js 16 <Image /> Equivalent	Notes
src="/path.jpg"	src="/path.jpg"	Same (local images in public/)
src="https://..."	src="https://..."	Must configure remotePatterns
alt="text"	alt="text"	Required (same)
width="800"	width={800}	Change to JS number
height="600"	height={600}	Change to JS number
class="name"	className="name"	JSX class -> className
loading="lazy"	loading="lazy"	Same (default)
style={{...}}	style={{...}}	Same object syntax

Required Conversions

All <img> tags MUST be converted in Next.js 16:

// ❌ INCORRECT - Plain img tag
<img src="/hero.jpg" alt="Hero banner" width="1920" height="1080" />

// ✅ CORRECT - Next.js Image component
import Image from 'next/image'
<Image src="/hero.jpg" alt="Hero banner" width={1920} height={1080} />