Next.js Next Image to Legacy Image

verified codemod icon

This automation safely migrates existing Next.js 10, 11, 12 next/image imports to their corresponding imports in Next.js 13.

Next.js
jscodeshift
Estimated time saving
5 minutes/occurrence
Change mode
Autonomous
Applicability criteria

Next.js version higher or equal to 13

Made by
Vercel
Vercel

Usage →

Codemod CLI:

intalling vs code extension tooltip icon
codemod next/13/next-image-to-legacy-image
copy CLI command icon

Codemod VS Code extension:

intalling vs code extension tooltip icon
vs code logo
Run in VS Code

Description

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 Image from 'next/image';
import FutureImage from 'next/future/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 Image from 'next/legacy/image';
import FutureImage 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>
	);
}

Links for more info