The App Router isn't just a new file structure — it's a different mental model for how React apps are built.
Pages Router: Components run on the client. Data fetching is a special lifecycle (getServerSideProps, getStaticProps).
App Router: Components run on the server by default. Data fetching is just async/await.
The biggest practical win is nested layouts. Your sidebar, navbar, and shell render once and persist across navigations — no flicker, no re-mount.
app/
layout.tsx ← renders once
page.tsx ← swaps on navigation
dashboard/
layout.tsx ← nested shell
page.tsx
Components, actions, and tests can live next to the route that uses them. No more hunting through /components for a component that's only used in one place.
The nested layouts section is the most underrated part of this post. That feature alone saves so much work.
Migrating from Pages to App Router was painful but worth it. This captures why.
Log in to leave a comment.