ContextQMD
Back to Next Js

`next/image` changed in version 13

errors/next-image-upgrade-to-13.mdx

16.2.51.9 KB
Original Source

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 `` 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:

bash
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:

bash
npx @next/codemod next-image-experimental .

Please note this second codemod is experimental and only covers static usage (such as <Image src={img} layout="responsive" />) but not dynamic usage (such as <Image {...props} />).