Next/13/Next Image To Legacy Image

1.0.2Last update Jan 10, 2025

Codemod verified

Official codemod published by a verified account. Learn more.

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