Add codemods for next/image

docs/advanced-features/codemods.md

@@ -17,6 +17,44 @@ Codemods are transformations that run on your codebase programmatically. This al
 - `--dry` Do a dry-run, no code will be edited
 - `--print` Prints the changed output for comparison
 
+## Next.js 13
+
+### `next-image-to-legacy-image`
+
+Safely migrates existing Next.js 10, 11, 12 applications importing `next/image` to the renamed `next/legacy/image` import in Next.js 13.
+
+For example:
+
+```jsx
+import Image1 from 'next/image'
+import Image2 from 'next/future/image'
+
+export default function Home() {
+  return (
+    <div>
+      <Image1 src="/test.jpg" width="200" height="300" />
+      <Image2 src="/test.png" width="500" height="400" />
+    </div>
+  )
+}
+```
+
+Transforms into:
+
+```jsx
+import Image1 from 'next/legacy/image'
+import Image2 from 'next/image'
+
+export default function Home() {
+  return (
+    <div>
+      <Image1 src="/test.jpg" width="200" height="300" />
+      <Image2 src="/test.png" width="500" height="400" />
+    </div>
+  )
+}
+```
+
 ## Next.js 11
 
 ### `cra-to-next` (experimental)

docs/upgrading.md

@@ -4,6 +4,11 @@ description: Learn how to upgrade Next.js.
 
 # Upgrade Guide
 
+## Upgrading from 12 to 13
+
+The `next/image` import was renamed to `next/legacy/image`. The `next/future/image` import was renamed to `next/image`.
+A [codemod is available](/docs/advanced-features/codemods.md#next-image-to-legacy-image) to automatically rename your imports.
+
 ## Upgrading to 12.2
 
 If you were using Middleware prior to `12.2`, please see the [upgrade guide](https://nextjs.org/docs/messages/middleware-upgrade-guide) for more information.

packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/dynamic.input.js

@@ -0,0 +1,14 @@
+export async function Home() {
+  const Image = await import("next/image");
+  const Named = await import("next/image");
+  const Foo = await import("foo");
+  const Future1 = await import("next/future/image");
+  const Future2 = await import("next/future/image");
+  return (<div>
+    <h1>Both</h1>
+    <Image src="/test.jpg" width="200" height="300" />
+    <Named src="/test.png" width="500" height="400" />
+    <Future1 src="/test.webp" width="60" height="70" />
+    <Future2 src="/test.avif" width="80" height="90" />
+  </div>)
+}

packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/dynamic.output.js

@@ -0,0 +1,14 @@
+export async function Home() {
+  const Image = await import("next/legacy/image");
+  const Named = await import("next/legacy/image");
+  const Foo = await import("foo");
+  const Future1 = await import("next/image");
+  const Future2 = await import("next/image");
+  return (<div>
+    <h1>Both</h1>
+    <Image src="/test.jpg" width="200" height="300" />
+    <Named src="/test.png" width="500" height="400" />
+    <Future1 src="/test.webp" width="60" height="70" />
+    <Future2 src="/test.avif" width="80" height="90" />
+  </div>)
+}

packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/general.input.js

@@ -0,0 +1,15 @@
+import Image from "next/image";
+import Named from "next/image";
+import Foo from "foo";
+import Future1 from "next/future/image";
+import Future2 from "next/future/image";
+
+export default function Home() {
+  return (<div>
+    <h1>Both</h1>
+    <Image src="/test.jpg" width="200" height="300" />
+    <Named src="/test.png" width="500" height="400" />
+    <Future1 src="/test.webp" width="60" height="70" />
+    <Future2 src="/test.avif" width="80" height="90" />
+  </div>)
+}

packages/next-codemod/transforms/__testfixtures__/next-image-to-legacy-image/general.output.js

@@ -0,0 +1,15 @@
+import Image from "next/legacy/image";
+import Named from "next/legacy/image";
+import Foo from "foo";
+import Future1 from "next/image";
+import Future2 from "next/image";
+
+export default function Home() {
+  return (<div>
+    <h1>Both</h1>
+    <Image src="/test.jpg" width="200" height="300" />
+    <Named src="/test.png" width="500" height="400" />
+    <Future1 src="/test.webp" width="60" height="70" />
+    <Future2 src="/test.avif" width="80" height="90" />
+  </div>)
+}

packages/next-codemod/transforms/__tests__/next-image-to-legacy-image.test.js

@@ -0,0 +1,16 @@
+/* global jest */
+jest.autoMockOff()
+const defineTest = require('jscodeshift/dist/testUtils').defineTest
+const { readdirSync } = require('fs')
+const { join } = require('path')
+
+const fixtureDir = 'next-image-to-legacy-image'
+const fixtureDirPath = join(__dirname, '..', '__testfixtures__', fixtureDir)
+const fixtures = readdirSync(fixtureDirPath)
+  .filter(file => file.endsWith('.input.js'))
+  .map(file => file.replace('.input.js', ''))
+
+for (const fixture of fixtures) {
+  const prefix = `${fixtureDir}/${fixture}`;
+  defineTest(__dirname, fixtureDir,  null, prefix)
+}

packages/next-codemod/transforms/next-image-to-legacy-image.ts

@@ -0,0 +1,68 @@
+import type { API, FileInfo, Options } from 'jscodeshift'
+
+export default function transformer(
+  file: FileInfo,
+  api: API,
+  options: Options
+) {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  // Before: import Image from "next/image"
+  //  After: import Image from "next/legacy/image"
+  root
+    .find(j.ImportDeclaration, {
+      source: { value: 'next/image' },
+    })
+    .forEach((imageImport) => {
+      j(imageImport).replaceWith(
+        j.importDeclaration(
+          imageImport.node.specifiers,
+          j.stringLiteral('next/legacy/image')
+        )
+      )
+    })
+  // Before: const Image = await import("next/image")
+  //  After: const Image = await import("next/legacy/image")
+  root
+    .find(j.ImportExpression, {
+      source: { value: 'next/image' },
+    })
+    .forEach((imageImport) => {
+      j(imageImport).replaceWith(
+        j.importExpression(j.stringLiteral('next/legacy/image'))
+      )
+    })
+
+  // Before: import Image from "next/future/image"
+  //  After: import Image from "next/image"
+  root
+    .find(j.ImportDeclaration, {
+      source: { value: 'next/future/image' },
+    })
+    .forEach((imageFutureImport) => {
+      j(imageFutureImport).replaceWith(
+        j.importDeclaration(
+          imageFutureImport.node.specifiers,
+          j.stringLiteral('next/image')
+        )
+      )
+    })
+
+  // Before: const Image = await import("next/future/image")
+  //  After: const Image = await import("next/image")
+  root
+    .find(j.ImportExpression, {
+      source: { value: 'next/future/image' },
+    })
+    .forEach((imageFutureImport) => {
+      j(imageFutureImport).replaceWith(
+        j.importExpression(j.stringLiteral('next/image'))
+      )
+    })
+
+  // Learn more about renaming an import declaration here:
+  // https://www.codeshiftcommunity.com/docs/import-manipulation/#replacerename-an-import-declaration
+
+  return root.toSource(options)
+}