Migrate Next.js Pages Router to App Router

Systematically migrate a Next.js app from Pages Router to App Router with Copilot.

modernization
migration
nextjs
app-router
upgrade
workflow
multi-step
0

Prompt

A comprehensive workflow for migrating Next.js Pages Router to the modern App Router architecture.

## Steps:

1. Audit your current pages/ directory and list all routes.

2. Create app/ directory and set up root layout.tsx.

3. For each page, ask Copilot: 'Convert this Pages Router page to App Router format with server components.'

4. Migrate getServerSideProps/getStaticProps to Server Components or route handlers.

5. Convert API routes from pages/api/ to app/api/ route handlers.

6. Update navigation: replace next/link usage where needed and test client transitions.

7. Migrate middleware.ts if present, updating matcher patterns for App Router.

8. Test all routes thoroughly, check for hydration errors, and remove old pages/ directory.