What is the difference between the pages router and the newer app router in Next.js?

The pages router, Next.js's original approach, defines each route as a file inside a pages folder, and every page is rendered on the client by default unless configured otherwise. The newer app router, inside an app folder, uses Server Components by default, supports nested layouts more naturally, and gives finer control over rendering behavior for each part of a page.

// Pages router: pages/about.js
export default function About() {
  return <h1>About Us</h1>;
}

// App router: app/about/page.js
export default function About() {
  return <h1>About Us</h1>;
}