)
}
```
### Logo Component
```typescript
import Image from 'next/image'
/**
* Company logo component with proper sizing.
*
* @param src - Logo image URL
* @param height - Logo height (width calculated from aspect ratio)
* @param alt - Company name for alt text
* @returns Logo component
*/
export function Logo({
src,
height = 40,
alt = 'Company logo'
}: {
src: string
height?: number
alt?: string
}) {
return (
)
}
```
### Gallery Image
```typescript
import Image from 'next/image'
import { useState } from 'react'
/**
* Gallery image with lightbox functionality.
*
* @param src - Image source URL
* @param caption - Image caption
* @returns Gallery image component
*/
export function GalleryImage({
src,
caption
}: {
src: string
caption: string
}) {
const [isLoaded, setIsLoaded] = useState(false)
return (
setIsLoaded(true)}
loading="lazy"
/>
{!isLoaded && (
)}
{caption}
)
}
```
## Migration Guide
### From Next.js 15 to 16
#### Remove Layout Prop
```typescript
// ❌ Next.js 15 - layout prop removed in 16
// ✅ Next.js 16 - use fill prop or explicit sizing
```
#### Remove objectFit/ObjectPosition Props
```typescript
// ❌ Next.js 15 - props removed in 16
// ✅ Next.js 16 - use style object
```
#### Replace Unoptimized Prop
```typescript
// ❌ Next.js 15 - unoptimized prop removed in 16
// ✅ Next.js 16 - use custom loader
const unoptimizedLoader: ImageLoader = ({ src }) => src
```
#### Update Domain Configuration
```typescript
// ❌ Next.js 15 - domains deprecated
const nextConfig = {
images: {
domains: ['example.com', 'cdn.example.com'],
},
}
// ✅ Next.js 16 - use remotePatterns
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
pathname: '/**',
},
{
protocol: 'https',
hostname: 'cdn.example.com',
pathname: '/**',
},
],
},
}
```
## Best Practices
### Accessibility
- **Always provide alt text**: Describe the image for screen readers
- **Alt text should be descriptive**: Not just "image" or "photo"
- **Decorative images**: Use empty alt text `alt=""`
- **Avoid "Image of"**: Alt text should start with the subject
```typescript
// ✅ Good alt text
// ❌ Bad alt text
```
### Performance
- **Use `priority` for above-fold images**: Load critical images first
- **Use `loading="lazy"` for below-fold**: Defer loading off-screen images
- **Provide proper sizes**: Help browser select correct image size
- **Optimize image quality**: Use quality prop (75-85 recommended)
- **Use blur placeholders**: Improve perceived performance
```typescript
// Above-fold - use priority
// Below-fold - use lazy loading
```
### Security
- **Configure remote patterns**: Only allow trusted domains
- **Use specific paths**: Don't allow wildcard `/**` for all paths
- **HTTPS only**: Always use HTTPS for remote patterns
- **Validate image URLs**: Sanitize user-provided image URLs
```typescript
// ✅ Secure - specific domain and path
{
protocol: 'https',
hostname: 'cdn.trusted.com',
pathname: '/images/**',
}
// ❌ Insecure - wildcard on everything
{
protocol: 'https',
hostname: '**',
pathname: '/**',
}
```
### Responsive Design
- **Use sizes prop**: Ensure correct image size loads
- **Test on multiple viewports**: Verify images load properly
- **Use fill for flexible layouts**: Match parent container
- **Maintain aspect ratio**: Avoid layout shifts
## Common Issues and Solutions
### Remote Images Not Loading
**Issue:** External images showing placeholder or error
**Solution:** Add domain to `remotePatterns` in next.config.ts
```typescript
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'your-domain.com',
pathname: '/**',
},
],
},
}
```
### Type Errors on width/height
**Issue:** TypeScript error when width/height is unknown
**Solution:** Use fill prop or define explicit dimensions
```typescript
// ❌ Missing width/height
// ✅ With explicit dimensions
// ✅ With fill prop
```
### Layout Shift Issues
**Issue:** Page content jumps when images load
**Solution:** Reserve space for images with proper dimensions or fill
```typescript
// Reserve space with explicit dimensions
// Or use fill with parent container
```
### Slow Image Loading
**Issue:** Images taking too long to load
**Solution:** Use priority, quality, and blur placeholders
```typescript
```
### Blur Data Not Working
**Issue:** Blur placeholder not showing
**Solution:** Ensure blurDataURL is valid base64 string
```typescript
// Generate blur data properly
import { getPlaiceholder } from 'plaiceholder'
const { base64 } = await getPlaiceholder(800, 600)
```
### Images Not Optimizing
**Issue:** Images not being optimized by Next.js
**Solution:** Ensure images are in public/ or properly configured
```typescript
// Local images - place in public/
import image from '@/public/image.jpg' // ✅ Will optimize
// Remote images - configure remotePatterns
const nextConfig = {
images: {
remotePatterns: [{ protocol: 'https', hostname: 'example.com', pathname: '/**' }],
},
}
```
## Verification Checklist
After implementation, verify:
### Configuration
- [ ] Remote domains configured in next.config.ts
- [ ] Remote patterns use HTTPS protocol
- [ ] Specific paths defined instead of wildcards
- [ ] Image optimization enabled
### Image Usage
- [ ] All images use Next.js Image component (not img tag)
- [ ] Alt text provided for all images
- [ ] Width and height specified (or fill prop used)
- [ ] Proper sizes string for responsive images
- [ ] Priority prop for above-fold images
- [ ] Lazy loading for below-fold images
### Performance
- [ ] Images load without layout shift
- [ ] Blurry placeholders during load (optional)
- [ ] Appropriate image quality (75-85)
- [ ] Responsive images work on all viewports
- [ ] Images optimized and served in WebP
### Accessibility
- [ ] All images have descriptive alt text
- [ ] Decorative images use empty alt text
- [ ] Alt text doesn't start with "Image of"
- [ ] Screen readers can read image descriptions
### TypeScript
- [ ] No TypeScript errors on Image props
- [ ] Types for src, width, height correct
- [ ] Custom loaders properly typed
- [ ] Fill props used correctly in TypeScript
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/darellchua2) — claim your Tome and manage your conversions.
// ✅ CORRECT - Next.js Image component
import Image from 'next/image'
// ✅ After (converted to Next.js Image)
import Image from 'next/image'
// ✅ After (converted to Next.js Image)
import Image from 'next/image'
// ✅ After (converted to Next.js Image - requires remote config)
import Image from 'next/image'
// Configure remotePatterns first:
// next.config.ts:
// images: { remotePatterns: [{ protocol: 'https', hostname: 'cdn.example.com', pathname: '/**' }] }