Skip to main content

`next/image` changed in version 13

Why This Error Occurred​

Starting in Next.js 13, the next/image component has undergone some major changes.

Compared to the legacy component, the new next/image component has the following changes:

  • Removes <span> wrapper around <img> in favor of native computed aspect ratio
  • Adds support for canonical style prop
    • Removes layout prop in favor of style or className
    • Removes objectFit prop in favor of style or className
    • Removes objectPosition prop in favor of style or className
  • Removes IntersectionObserver implementation in favor of native lazy loading
    • Removes lazyBoundary prop since there is no native equivalent
    • Removes lazyRoot prop since there is no native equivalent
  • Removes loader config in favor of loader prop
  • Changed alt prop from optional to required

Possible Ways to Fix It​

Run the next-image-to-legacy-image codemod to automatically change next/image imports to next/legacy/image, for example:

npx @next/codemod next-image-to-legacy-image .

After running this codemod, you can optionally upgrade next/legacy/image to the new next/image with another codemod, for example:

npx @next/codemod next-image-experimental .

Please note this second codemod is experimental and only covers static usage