Next.js requires all Image components to include an alt attribute for accessibility compliance. This error occurs when you use the next/image component without providing the alt prop, preventing proper screen reader support and accessibility standards.
This error is thrown by Next.js when you use the `<Image>` component without including the required `alt` property. The Next.js Image component enforces accessibility best practices by making the alt attribute mandatory, unlike standard HTML img elements where it's technically optional but recommended. The alt (alternative text) attribute serves multiple critical purposes: it provides text descriptions for screen readers used by visually impaired users, displays fallback text when images fail to load, and helps search engines understand image content for SEO. Next.js takes a strict approach to accessibility by refusing to render images without this property. This is an intentional design decision by the Next.js team to encourage developers to build more accessible applications by default. The framework goes beyond W3C recommendations by enforcing what is merely a "should" in the HTML specification as a hard requirement.
Locate the Image component showing the error and add a meaningful alt attribute that describes the image content:
import Image from 'next/image';
// Before (causes error)
<Image src="/profile.jpg" width={200} height={200} />
// After (fixed)
<Image
src="/profile.jpg"
width={200}
height={200}
alt="User profile photo showing person smiling"
/>The alt text should be descriptive and convey the meaning or purpose of the image. Avoid generic descriptions like "image" or "photo".
If the image is purely decorative and doesn't convey meaningful information (like background patterns, dividers, or aesthetic elements), use an empty string for the alt attribute:
<Image
src="/decorative-pattern.svg"
width={100}
height={100}
alt=""
/>This tells screen readers to skip the image entirely, which is the correct accessibility behavior for decorative content. Never omit the alt prop completely—always use alt="" for decorative images.
For dynamically loaded images, ensure the alt prop is always defined, even if it comes from your data source:
interface Product {
imageUrl: string;
name: string;
altText?: string;
}
function ProductImage({ product }: { product: Product }) {
return (
<Image
src={product.imageUrl}
width={300}
height={300}
alt={product.altText || product.name || 'Product image'}
/>
);
}Always provide a fallback value to ensure alt is never undefined or null.
If you're passing image props through component hierarchies, ensure your TypeScript interfaces include the alt property:
interface ImageProps {
src: string;
alt: string; // Required, not optional
width?: number;
height?: number;
}
function CustomImage({ src, alt, width = 500, height = 500 }: ImageProps) {
return <Image src={src} alt={alt} width={width} height={height} />;
}Making alt required in your own types prevents accidentally passing incomplete props to Next.js Image components.
Why Next.js enforces alt text:
Next.js makes the alt attribute required as part of its philosophy of "pit of success" design—making the correct, accessible approach the easiest path. While HTML specifications technically allow images without alt attributes, this creates accessibility barriers and violates WCAG 2.1 guidelines.
Screen reader behavior:
When an image lacks alt text, screen readers often fall back to reading the image filename, which can be confusing ("IMG_20230415_final_v2.jpg") or meaningless to users. By requiring alt text, Next.js ensures all images are either properly described or explicitly marked as decorative.
SEO implications:
Search engines use alt text as a ranking signal for image search and to understand page content context. Images with proper alt text contribute to better SEO performance and improved content discoverability.
ESLint integration:
The eslint-plugin-jsx-a11y package (included in Next.js by default) provides additional checks for alt text quality beyond just presence. Consider enabling rules like jsx-a11y/alt-text for more comprehensive accessibility linting.
Migration strategies:
When migrating large codebases from img to Image components, use find-and-replace with regex to systematically add alt props. Search for <Image[^>]*src= patterns and audit each usage for appropriate alt text rather than adding placeholder values.
Performance considerations:
The alt attribute has no impact on image loading performance or optimization features. Next.js Image optimization (automatic WebP/AVIF conversion, lazy loading, responsive sizing) works identically regardless of alt text content.
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