Codemod verified

Approved by the official project.

Next.js

migration

Codemod

Next/13/New Image Experimental

Last update

Jul 24, 2024

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

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} />;
}