Migrate a Next.js Pages Router app to the App Router

Help me migrate part of my Next.js app from the Pages Router (pages/) to the App Router (app/).

Project context:
- Current Next.js version: [version]
- Pages currently using: [getServerSideProps / getStaticProps / getInitialProps / none]
- Routes to migrate first: [e.g. "/blog and /blog/[slug]"]
- Data fetching source: [REST API / database via ORM / CMS — name it]
- Any custom _app.tsx or _document.tsx logic I need preserved: [describe, e.g. global providers, analytics script]

Do this incrementally, not as one big rewrite:
1. Propose a migration order for my routes (simplest/lowest-risk first) and explain why
2. For the first route, show the App Router equivalent: layout.tsx, page.tsx, loading.tsx and error.tsx as needed
3. Convert the existing data fetching method to the App Router equivalent (server components, fetch with caching options, or route handlers) and explain the caching behavior difference
4. Preserve any global providers, metadata, and third-party scripts from _app/_document in the new root layout
5. Flag any client-only code (browser APIs, context providers, event handlers) that needs a "use client" boundary, and place that boundary as low in the tree as possible
6. Note any behavior differences I should test manually (e.g. loading states, error boundaries, redirects, metadata)

After each route migration, tell me what to verify manually before moving to the next route, and whether the old and new routes can coexist during the transition.