How to fix The "next/image" component requires a defined width and height in React

ReactBEGINNERMEDIUMUpdated Dec 9, 2025· 140 views

This error occurs when using the Next.js Image component without providing required width and height props for remote images. Next.js needs these dimensions to prevent layout shift and optimize image loading.

Quick fix

Fixes The "next/image" component requires a defined width and height

import Image from 'next/image';

export default function MyComponent() {
  return (
    <Image
      src="https://example.com/photo.jpg"
      width={800}
      height={600}
      alt="Description"
    />
  );
}

Add explicit width and height props for remote images
Use the fill prop for container-filling images
Use local imports for static images
Use placeholder dimensions with responsive styling

react — error

$import Image from 'next/image';
export default function MyComponent() {
  return (
    <Image
      src="https://example.com/photo.jpg"
      width={800}
      height={600}
      alt="Description"
    />
  );
}
The "next/image" component requires a defined width and height

What this error means

This error appears when you use the `next/image` component without specifying the `width` and `height` props, particularly for remote images. Next.js requires these dimensions to calculate the correct aspect ratio and reserve space in the layout before the image loads. The requirement exists to prevent Cumulative Layout Shift (CLS), a Core Web Vital metric. When the browser doesn't know an image's dimensions beforehand, it must load the image first and then adjust the layout dynamically, causing the page content to shift unexpectedly as images load. For local/static images imported directly, Next.js can automatically determine dimensions at build time. However, for remote images hosted on external servers, Next.js cannot access the files during the build process, so you must provide the dimensions manually or use alternative layout approaches.

Typical symptoms

Build fails with error about missing width/height on next/image
TypeScript shows type error on Image component
Runtime error in development mode when rendering Image component
Image component does not render on the page
Console warnings about required props in next/image

Common causes

Using remote image URLs without width and height props
Forgetting to add dimensions when migrating from standard img tags
Working with dynamic images where dimensions are unknown
Not using the fill prop for images that should fill their container
Misunderstanding that width/height are required even if styled differently with CSS

How to fix "The "next/image" component requires a defined width and height"

1Add explicit width and height props for remote images

If you know the image dimensions, add them directly to the Image component:

tsx

import Image from 'next/image';

export default function MyComponent() {
  return (
    <Image
      src="https://example.com/photo.jpg"
      width={800}
      height={600}
      alt="Description"
    />
  );
}

The width and height values represent the intrinsic size of the image, not the rendered size. CSS will control the actual display dimensions.

2Use the fill prop for container-filling images

For images that should fill their parent container (like hero images or backgrounds), use the fill prop instead:

tsx

import Image from 'next/image';

export default function Hero() {
  return (
    <div style={{ position: 'relative', width: '100%', height: '400px' }}>
      <Image
        src="https://example.com/hero.jpg"
        fill
        alt="Hero image"
        style={{ objectFit: 'cover' }}
      />
    </div>
  );
}

Important: The parent element must have position: relative, position: fixed, or position: absolute for fill to work properly.

3Use local imports for static images

For static images in your project, import them directly so Next.js can automatically determine dimensions:

tsx

import Image from 'next/image';
import profilePic from '../public/profile.jpg';

export default function Profile() {
  return (
    <Image
      src={profilePic}
      alt="Profile picture"
      // width and height are automatically provided
    />
  );
}

This approach works for images in the public directory or imported as modules.

4Use placeholder dimensions with responsive styling

If you need responsive images but must provide dimensions, use this pattern:

tsx

import Image from 'next/image';

export default function ResponsiveImage() {
  return (
    <Image
      src="https://example.com/photo.jpg"
      width={0}
      height={0}
      sizes="100vw"
      style={{ width: '100%', height: 'auto' }}
      alt="Responsive image"
    />
  );
}

This satisfies the requirement while allowing CSS to control the actual display size. The sizes prop helps Next.js generate the appropriate srcset for different viewports.

5Fetch dimensions dynamically for unknown sizes

If image dimensions are truly unknown, fetch them from your API or use an image analysis service:

tsx

import Image from 'next/image';

interface ImageData {
  url: string;
  width: number;
  height: number;
}

export default function DynamicImage({ imageData }: { imageData: ImageData }) {
  return (
    <Image
      src={imageData.url}
      width={imageData.width}
      height={imageData.height}
      alt="Dynamic image"
    />
  );
}

Store image dimensions in your database alongside the URL, or use image hosting services like Cloudinary that provide dimension metadata.

Advanced notes

Understanding Layout Modes (Next.js 12 and earlier):

In Next.js versions before 13, the Image component used layout props:
- layout="intrinsic": Default behavior, image scales down for smaller viewports
- layout="fixed": Image dimensions never change
- layout="responsive": Scales with container width
- layout="fill": Fills parent container

These have been replaced in Next.js 13+ with the fill prop and CSS-based styling.

Core Web Vitals Impact:

The width and height requirement directly improves Cumulative Layout Shift (CLS), one of Google's Core Web Vitals. By reserving the correct space before images load, Next.js prevents content from jumping around, which improves both user experience and SEO rankings.

Next.js Image Optimization:

The Image component automatically:
- Serves images in modern formats (WebP, AVIF) when supported
- Generates multiple sizes for different devices (srcset)
- Lazy loads images by default
- Prevents layout shift with proper dimensions

Remote Image Configuration:

For remote images, you must also configure allowed domains in next.config.js:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/images/**',
      },
    ],
  },
};

Performance Considerations:

The sizes prop is crucial for optimization. Without it, Next.js assumes the image is 100vw (full viewport width), which may cause unnecessarily large images to download. Specify sizes based on your layout:

tsx

<Image
  src="/photo.jpg"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="Photo"
/>

This tells Next.js: use 100% width on mobile, 50% on tablets, and 33% on desktop.

Frequently asked questions

What does "The "next/image" component requires a defined width and height" mean?: This error appears when you use the next/image component without specifying the width and height props, particularly for remote images. js requires these dimensions to calculate the correct aspect ratio and reserve space in the layout before the image loads. The requirement exists to prevent Cumulative Layout Shift (CLS), a Core Web Vital metric.
How do I fix "The "next/image" component requires a defined width and height"?: This error occurs when using the Next.js Image component without providing required width and height props for remote images. Next.js needs these dimensions to prevent layout shift and optimize image loading.
What causes "The "next/image" component requires a defined width and height"?: Using remote image URLs without width and height props Forgetting to add dimensions when migrating from standard img tags Working with dynamic images where dimensions are unknown
Is the "The "next/image" component requires a defined width and height" error serious?: It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.