Architecture Migration

Migrate Next.js Pages Router to App Router Automatically

Upload your project and get production-ready migrated code in minutes.

Start Migration

What changes between Next.js Pages Router and Next.js App Router?

  • Pages move from pages/ to app/ directory with folder-based routing and page.tsx convention
  • getServerSideProps/getStaticProps replaced by async Server Components with direct data fetching
  • Layout system: _app.tsx and _document.tsx replaced by app/layout.tsx root layout
  • Metadata: Head component and next/head replaced by metadata export and generateMetadata
  • Client interactivity requires 'use client' directive; Server Components are the default
  • Loading states: loading.tsx files replace manual isLoading state management
  • Error handling: error.tsx boundary files replace custom _error.tsx page
  • API routes in pages/api/ can coexist or migrate to app/api/ Route Handlers

How Nivo migrates Next.js Pages Router to Next.js App Router

01

Connect your project

Paste a GitHub URL or upload a ZIP file of your Next.js Pages Router project.

02

Nivo detects your Next.js Pages Router project

The engine scans your codebase to identify Next.js Pages Router patterns, APIs, and configuration that need updating.

03

AI applies all Next.js App Router migration transforms

Hybrid AST + AI engine applies deterministic transforms for configuration and dependencies, and AI-powered transforms for complex code changes. Every change gets a confidence score.

04

Download migrated codebase + review report

Get a ZIP with your fully migrated code, a complete migration report, and a checklist of items flagged for manual review.

Frequently Asked Questions

What is the biggest challenge in migrating to App Router?

The mental model shift from getServerSideProps/getStaticProps to Server Components is the biggest change. Data fetching moves from page-level functions to component-level async/await. Nivo converts your data fetching patterns and adds 'use client' directives where needed.

Can I migrate incrementally from Pages to App Router?

Yes. Next.js supports running both routers simultaneously. Nivo can migrate specific routes to the app/ directory while leaving others in pages/. This is the recommended approach for large applications.

How long does the Pages to App Router migration take?

Most projects complete in 10 to 20 minutes. The time depends on the number of pages and the complexity of data fetching patterns. Each page requires conversion of its data fetching, layout, and metadata approach.

What happens to my API routes?

API routes in pages/api/ continue to work alongside the app/ directory. Nivo can optionally convert them to Route Handlers in app/api/ which support edge runtime and streaming responses.

Will client-side routing still work the same way?

next/link and useRouter continue to work. Nivo updates useRouter imports from next/router to next/navigation and adjusts method names (router.push remains, but router.query becomes useSearchParams).

Start your Next.js Pages Router to Next.js App Router migration

Start Migration

Free tier available — no credit card required

Related Migrations

Next.js 14Next.js 15

Automatically migrate your Next.js 14 project to Next.js 15. Handles async request APIs, new caching defaults, React 19 integration, and Turbopack changes in minutes.

Framework Upgrade
Next.js 13Next.js 14

Automatically upgrade your Next.js 13 project to Next.js 14. Handles Server Actions stabilization, metadata API changes, and partial prerendering preparation.

Framework Upgrade
React 18React 19

Automatically migrate React 18 to React 19. Handles ref-as-prop, removal of forwardRef, new use() hook, Actions API, and deprecated legacy APIs in minutes.

Framework Upgrade