Next/13/Next Image To Legacy Image

Last update

Jul 24, 2024

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