Next.js New Image Experimental

This automation dangerously migrates the usages of the Image component from the next/legacy/image module to the next/image module.

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

Next.js version higher or equal to 13.4

Made by
Vercel
Vercel

Usage →

Codemod CLI:

intalling vs code extension tooltip icon
codemod next/13/new-image-experimental
copy CLI command icon

Codemod VS Code extension:

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

New Image Experimental

Description

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.

Examples

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

Links for more info