Next/13/Next Image To Legacy Image

1.0.1Last update Jul 24, 2024

Codemod verified

Regularly tested and maintained by our engineers and codemod expert community.

This codemod safely migrates existing Next.js 10, 11, 12 applications importing next/image to the renamed next/legacy/image import in Next.js 13 by replacing next/image imports with next/legacy/image and replacing next/future/image imports with next/image.

Example

Before

import FutureImage from 'next/future/image';
import Image from 'next/image';

export default function Home() {
	return (
		<div>
			<Image src="/test.jpg" width="100" height="200" />
			<FutureImage src="/test.png" width="300" height="400" />
		</div>
	);
}

After

import FutureImage from 'next/image';
import Image from 'next/legacy/image';

export default function Home() {
	return (
		<div>
			<Image src="/test.jpg" width="100" height="200" />
			<FutureImage src="/test.png" width="300" height="400" />
		</div>
	);
}

Example

Before

import FutureImage from 'next/future/image';
import Image from 'next/image';

export default function Home() {
	return (
		<div>
			<Image src="/test.jpg" width="100" height="200" />
			<FutureImage src="/test.png" width="300" height="400" />
		</div>
	);
}

After

import FutureImage from 'next/image';
import Image from 'next/legacy/image';

export default function Home() {
	return (
		<div>
			<Image src="/test.jpg" width="100" height="200" />
			<FutureImage src="/test.png" width="300" height="400" />
		</div>
	);
}

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now