Refactor Imports from @next/font to next/font

The App Router Recipe is a set of codemods that assist you with the pages-to-app migration process.

This codemod moves transforms imports from next/server to next/og for usage of Dynamic OG Image Generation.

This codemod migrates certain viewport metadata to viewport export.

Since Next.js 13.4, you can mark the files that contain only client-side code with the use client directive at the top.

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:

Since Next.js 13.4, you can use the following hooks from the next/navigation module:

This codemod generates a static metadata object based on meta tags managed by next/head.

Replaces API Routes with Route Handlers.

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.

The following data fetching methods are no longer available in the app directory:

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.

Safely removes <a> from Link components imported from the next/link module or adds the legacyBehavior prop on the component level.

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.

This highly experimental codemod moves the CSS-in-JS styles into the CSS Modules.

This codemod is recommended when migrating from the /pages to the /app directory.

This codemod transforms the module specifier @next/font/* in import statements into next/font/*.

The first step to migrate your pages to the app directory is to provide a new file structure, respected by the App router.

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.