C

next/13/new-image-experimental

How to Use
Run this codemod on your codebase using one of the following commands

The easiest way to run this codemod without installing anything globally:

Documentation

This codemod dangerously migrates the usages of the Image component from the next/legacy/image module to the next/image module.
This is achieved by adding inline styles and removing unused props.

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

Functionality:

  • Removes layout prop and adds style
  • Removes objectFit prop and adds style
  • Removes objectPosition prop and adds style
  • Removes lazyBoundary prop
  • Removes lazyRoot prop
  • Changes next.config.js loader to "custom", removes path, and sets loaderFile to a new file.

Example

Before: intrinsic

jsx

After: intrinsic

jsx

Before: responsive

jsx

After: responsive

jsx

Before: fill

jsx

After: fill

jsx

Before: fixed

jsx

After: fixed

jsx

Ready to contribute?

Build your own codemod and share it with the community.