𝗡𝗲𝘅𝘁.𝗷𝘀 𝗣𝗮𝗴𝗲𝘀 𝗥𝗼𝘂𝘁𝗲𝗿 𝘁𝗼 𝗔𝗽𝗽 𝗥𝗼𝘂𝘁𝗲𝗿 𝗠𝗶𝗴𝗿𝗮𝘁𝗶𝗼𝗻 𝗚𝘂𝗶𝗱𝗲 𝟮𝟬𝟮𝟲

𝗡𝗲𝘅𝘁.𝗷𝘀 𝗣𝗮𝗴𝗲𝘀 𝗥𝗼𝘂𝘁𝗲𝗿 𝘁𝗼 𝗔𝗽𝗽 𝗥𝗼𝘂𝘁𝗲𝗿 𝗠𝗶𝗴𝗿𝗮𝘁𝗶𝗼𝗻 𝗚𝘂𝗶𝗱𝗲 𝟮𝟬𝟮𝟲

Move from Pages Router to App Router one route at a time. Both routers run in the same project. This makes the change easy.

Here are the main changes:

• File paths: pages/index.tsx becomes app/page.tsx.
• Layouts: _app.tsx becomes layout.tsx.
• Data: getServerSideProps becomes Async Server Components.
• Components: Server by default. Use 'use client' for client components.
• Metadata: Use metadata export instead of next/head.
• API: Move to app/api/route/route.ts.
• States: Use loading.tsx and error.tsx.
• Streaming: Now built-in with Suspense.

How to migrate:

• Run npm install next@latest react@latest react-dom@latest.
• Create an app directory.
• Build a root layout.tsx.
• Move routes one by one. Routes in the app folder take priority.

Important tips:

• Use next/navigation instead of next/router.
• Use generateStaticParams instead of getStaticPaths.

Should you migrate?

• Active projects: Yes. It improves performance.
• Stable projects: No. The effort is too high.
• New projects: Always start with App Router.

Source: https://dev.to/thekitbase/nextjs-pages-router-to-app-router-migration-guide-2026-4iep