new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

Next.js App Router · all subjects

migration & upgrading

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Migration strategy for pages to App Router

To migrate a page, break it into two steps: Step 1 move the default exported Page Component into a new Client Component, Step 2 import the new Client Component into a new page.js file inside the app directory. This is the easiest migration path because it has the most comparable behavior to the pages directory.

Hard navigation between App Router and Pages Router

When navigating between routes served by different Next.js routers (App Router and Pages Router), there will be a hard navigation. Automatic link prefetching with next/link will not prefetch across routers.

Incremental migration from pages to app directory

The app directory is intentionally designed to work simultaneously with the pages directory to allow for incremental page-by-page migration. This reduces the combined complexity of updates by breaking down migration into smaller steps.

Special file replacements from pages to app

Mapping of special files: pages/_app.js and pages/_document.js are replaced with app/layout.js root layout. pages/_error.js is replaced with granular error.js special files. pages/404.js is replaced with not-found.js file. pages/api/* API Routes are replaced with route.js (Route Handler) special file.

unstable_cache replaced by use cache directive

unstable_cache has been replaced by the 'use cache' directive in Next.js 16. The Next.js team recommends opting into Cache Components and replacing unstable_cache with the use cache directive.

Migration from Pages Router - pathname and query replacement

When migrating from next/router to next/navigation: the pathname string has been removed and is replaced by usePathname(). The query object has been removed and is replaced by useSearchParams().

Migration from Pages Router - router.events replacement

When migrating from next/router, router.events has been replaced. Page changes can now be listened for by composing other Client Component hooks like usePathname and useSearchParams.

Give your agent this brain