Next/13/New Image Experimental
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 addsstyle
- Removes
objectFit
prop and addsstyle
- Removes
objectPosition
prop and addsstyle
- Removes
lazyBoundary
prop - Removes
lazyRoot
prop - Changes next.config.js
loader
to "custom", removespath
, and setsloaderFile
to a new file.
Example
Before: intrinsic
import Image from 'next/image';import img from '../img.png';function Page() {return <Image src={img} />;}
After: intrinsic
import Image from 'next/image';import img from '../img.png';const css = { maxWidth: '100%', height: 'auto' };function Page() {return <Image src={img} style={css} />;}
Before: responsive
import Image from 'next/image';import img from '../img.png';function Page() {return <Image src={img} layout="responsive" />;}
After: responsive
import Image from 'next/image';import img from '../img.png';const css = { width: '100%', height: 'auto' };function Page() {return <Image src={img} sizes="100vw" style={css} />;}
Before: fill
import Image from 'next/image';import img from '../img.png';function Page() {return <Image src={img} layout="fill" />;}
After: fill
import Image from 'next/image';import img from '../img.png';function Page() {return <Image src={img} sizes="100vw" fill />;}
Before: fixed
import Image from 'next/image';import img from '../img.png';function Page() {return <Image src={img} layout="fixed" />;}
After: fixed
import Image from 'next/image';import img from '../img.png';function Page() {return <Image src={img} />;}
Build custom codemods
Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community