Migrate Next.js Pages Router to App Router

Systematically migrate a Next.js application from the pages router to the app router.

category:modernization

nextjs

react

migration

workflow

multi-step

Prompt

Use this migration when upgrading a Next.js project to leverage the App Router, server components, and new routing primitives.

## Steps:

1. Enable the app directory and create the initial app/layout.tsx and app/page.tsx.

2. Identify top-level routes in pages/ and recreate them under app/ as segments.

3. Convert getServerSideProps/getStaticProps into server components or route handlers.

4. Move shared layout components and providers into app/layout.tsx and nested layouts.

5. Define metadata using the new metadata API instead of next/head.

6. Implement loading and error UI using loading.tsx and error.tsx files.

7. Gradually deprecate pages/ routes once app/ equivalents are stable.