Assess, plan, evolve.

Safely removes `<a>` from `Link` components imported from the `next/link` module or adds the `legacyBehavior` prop on the component level. ## Example ### Before ```jsx export default function Component() { return ( <Link href="/a"> <a>Anchor</a> </Link> ); } ``` ### After ```jsx export default function Component() { return <Link href="/a">Anchor</Link>; } ```

• next.js
• migration

This codemod generates boilerplate code for A/B tests using the Next.js middlewares. The middleware controls the redirects from the legacy to the future pages. You can control the redirection probability and targeted pages using environment variables.

• next.js
• migration

This codemod moves transforms imports from `next/server` to `next/og` for usage of [Dynamic OG Image Generation](https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-image-generation). ## Example ### Before ```jsx import { ImageResponse } from "next/server"; ``` ### After ```jsx import { ImageResponse } from "next/og"; ```

• next.js
• migration

This codemod generates a static metadata object based on meta tags managed by `next/head`. The codemod checks all the child components used in a page file and extracts all the meta tags defined within the `<Head>` component. Such tags are then moved to the very page file alongside the dependencies of the tags. ## Example ### Before: ```jsx // a page file import Meta from '../../components/a.tsx'; export default function Page() { return <Meta />; } // component file import Head from 'next/head'; import NestedComponent from '../components/b.tsx'; export default function Meta() { return (<> <Head> <title>title</title> </Head> <NestedComponent /> </>) } // nested component file import Head from 'next/head'; export default function NestedComponent() { return <Head> <meta name="description" content="description" /> </Head> } export default NestedComponent; ``` ### After: ```jsx // page file import { Metadata } from 'next'; import Meta from '../../components/a.tsx'; export const metadata: Metadata = { title: `title`, description: 'description', }; export default function Page() { return <Meta />; } ```

• next.js
• migration

Since Next.js 13.4, you can use the following hooks from the `next/navigation` module: - `useRouter`, - `useSearchParams`, - `usePathname`, - `useParams`. These hooks replace the functionality available in the `useRouter` hook in the `next/hook` module, however, the behavior is distinct. This codemod allows you to migrate the `useRouter` hook to the new `useRouter` hook imported from `next/navigation`. This includes all usages of the `useRouter` hook which may be replaced with `useSearchParams` and `usePathname`. ## Example ### Before ```tsx import { useRouter } from "next/router"; function Component() { const { query } = useRouter(); const { a, b, c } = query; } ``` ### After ```tsx import { useParams, useSearchParams } from "next/navigation"; import { useCallback } from "react"; function Component() { const params = useParams(); const searchParams = useSearchParams(); const getParam = useCallback( (p: string) => params?.[p] ?? searchParams?.get(p), [params, searchParams], ); const a = getParam("a"); const b = getParam("b"); const c = getParam("c"); } ```

• next.js
• migration

This codemod transforms the module specifier `@next/font/*` in import statements into `next/font/*`. Using the `@next/font/*` modules is deprecated since Next.js v13.2. ## Example ### Before ```jsx import { Inter } from "@next/font/google"; ``` ### After ```jsx import { Inter } from "next/font/google"; ```

• next.js
• migration

The `next export` command is deprecated. This codemod dangerously removes all references to the command in `*.md`, `*.sh`, `package.json`. It also adds a property `output` with the value `export` to the `module.exports` object in `next.config.js` files. ## Example ### Before (Shell files): ```sh npm run next build npm run next export ``` ### After (Shell files): ```sh npm run next build ``` ### Before (`next.config.js` files): ```javascript module.exports = { distDir: "out", }; ``` ### After (`next.config.js` files): ```javascript module.exports = { distDir: "out", output: "export", }; ```

• next.js
• migration

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 ```jsx 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 ```jsx 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> ); } ```

• next.js
• migration

The App Router Recipe is a set of codemods that assist you with the pages-to-app migration process. The recipe includes the following codemods: - next/13/replace-next-router - next/13/replace-next-head - next/13/remove-get-static-props - next/13/app-directory-boilerplate

• next.js
• migration

This recipe is a set of codemods that will help migrate to next 15. The recipe includes the following codemods: - next/15/update-route-handlers - next/15/update-fetch-requests-to-handle-caching - next/15/add-experimental-stale-times - next/15/refactor-imports-from-@next/font-to-next/font

• migration
• next

Replaces API Routes with Route Handlers.

• next.js
• migration

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. ## Example ### Before: intrinsic ```jsx import Image from "next/image"; import img from "../img.png"; function Page() { return <Image src={img} />; } ``` ### After: intrinsic ```jsx 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 ```jsx import Image from "next/image"; import img from "../img.png"; function Page() { return <Image src={img} layout="responsive" />; } ``` ### After: responsive ```jsx 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 ```jsx import Image from "next/image"; import img from "../img.png"; function Page() { return <Image src={img} layout="fill" />; } ``` ### After: fill ```jsx import Image from "next/image"; import img from "../img.png"; function Page() { return <Image src={img} sizes="100vw" fill />; } ``` ### Before: fixed ```jsx import Image from "next/image"; import img from "../img.png"; function Page() { return <Image src={img} layout="fixed" />; } ``` ### After: fixed ```jsx import Image from "next/image"; import img from "../img.png"; function Page() { return <Image src={img} />; } ```

• next.js
• migration