How does the App Router differ from the older Pages Router in Next.js?

Next.js 13 introduced the App Router as a new paradigm alongside the existing Pages Router. While both can coexist in a project, the App Router is the recommended approach for new applications.

The Pages Router uses the /pages directory where each file becomes a route. Data fetching uses getServerSideProps, getStaticProps, and getStaticPaths at the page level. All components are Client Components by default.

The App Router uses the /app directory with a new file-convention system: page.tsx for routes, layout.tsx for shared layouts, loading.tsx for loading states, error.tsx for error boundaries, and not-found.tsx for 404 pages. These special files create nested layouts automatically.

Key differences: the App Router uses React Server Components by default, allowing you to keep large dependencies server-side. Data fetching is done with async components and native fetch with built-in caching. Layouts persist across navigations and don't re-render.

The App Router supports streaming and Suspense out of the box, enabling progressive rendering. It has a new approach to routing with route groups, parallel routes, and intercepting routes. Metadata is handled through the Metadata API rather than next/head.

Migration isn't required—both routers work together. However, new features are being developed primarily for the App Router.