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

The pages directory uses the older Pages Router system where routing is based on file names and relies on methods like getServerSideProps and getStaticProps. The app directory introduces the App Router with Server Components, layouts, nested routes, loading states, streaming, and improved data fetching patterns. The app directory provides a more modern and scalable architecture.