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.
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.
If you know the image dimensions, add them directly to the Image component:
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.
For images that should fill their parent container (like hero images or backgrounds), use the fill prop instead:
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.
For static images in your project, import them directly so Next.js can automatically determine dimensions:
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.
If you need responsive images but must provide dimensions, use this pattern:
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.
If image dimensions are truly unknown, fetch them from your API or use an image analysis service:
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.
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:
<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.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite