Next.js in Plain English: Pages Router vs App Router (and What to Choose)

Next.js changed a lot over the last couple years. If you learned it in the “pages” era, the new “app” router might feel like a different framework. Let’s make it simple.

Pages Router (The Classic)

File-based routing in pages/. If you create pages/about.js, you get /about. Data fetching happens with getServerSideProps, getStaticProps.

Pros: stable, tons of examples, less conceptual overhead.

Cons: less flexible for complex layouts, no server components.

App Router (The Modern One)

Routing in app/. Layouts are first-class. Server components are the default. You can fetch data directly in components on the server side.

Pros: great for streaming, nested layouts, server components, better performance when used correctly.

Cons: new mental model, caching rules can be confusing, ecosystem still catching up.

What I’d Choose in 2025

  • New project? Start with App Router unless your team is very new to Next.js
  • Existing project on Pages Router? Don’t migrate just for fun. Migrate only if you need App Router features
  • Need a quick marketing site? Pages Router is perfectly fine

One Practical Tip

Learn caching early. Many “Next.js is slow” complaints are actually “we accidentally disabled caching” issues.

Don’t get stuck in framework debates. Pick one router, ship the product, and evolve as you learn. Next.js rewards pragmatic teams.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top