Assess, plan, evolve.

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

Transform Next.js app router page components to use typed routes

• transformation
• migration
• +3

Migrate a project from the Next.js App Router to TanStack Start

• nextjs
• tanstack
• +4

Codemod for migrating Next.js to TanStack

• transformation
• migration
• +3

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

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

Add the Expo mobile app, the @kit/mobile-ui package and the /api/v1 mobile API to a MakerKit Next.js Supabase kit

• makerkit
• expo
• +4

Since Next.js 13.4, you can mark the files that contain only client-side code with the `use client` directive at the top. The codemod will look for identifiers and string literals common for files that contain client-side code, such as React hooks or event handlers. On the other hand, it will not upsert any directive should it spot elements indicating server-side code. The codemod will not remove the existing `use client` directive even if it would suggest otherwise due to the code in question. ## Example ### Before ```jsx import { useState } from "react"; export default function Page() { const [x, setX] = useState(""); return x; } ``` ### After ```jsx "use client"; import { useState } from "react"; export default function Page() { const [x, setX] = useState(""); return x; } ```

• next.js
• migration

A recent update in Next.js brought a breaking change: the `useSearchParams` hook no longer includes `params`. To ease the migration, the new `useCompatSearchParams` hook can be used. This hook mimics the behavior of the old `useSearchParams` in two ways: - it includes both `params` and `searchParams` - `params` overwrite any conflicting values in `searchParams` ## Example ### Before ```jsx import { useSearchParams } from "next/navigation"; export async function Component() { const params = useSearchParams(); return <div>My Component</div>; } ``` ### After ```jsx import { useCompatSearchParams } from "hooks/utils"; export async function Component() { const params = useCompatSearchParams(); return <div>My Component</div>; } ```

• next.js
• migration

Refactor Imports from @next/font to next/font This codemod refactors import statements in your code to replace @next/font with next/font, aligning with the latest Next.js module structure. - Find Import Declarations: Identifies all ImportDeclaration nodes in the code. - Check Import Path: Ensures that the import path starts with @next/font. - Replace Import Path: Updates the import path to use next/font instead of @next/font. ### Before ```js // Before import { Inter } from "@next/font/google"; ``` ### After ```js // After import { Inter } from "next/font/google"; ```

• next
• migration