App Router vs Pages Router
All Next.js topics∙ Next.js
The App Router uses the app directory, nested layouts, Server Components, loading and error files, and modern data patterns. The Pages Router uses the pages directory and older page-level data functions. This lesson explains how it works, when to use it, how to implement it safely, and how to verify the result.
Real-World Uses
- 1App Router vs Pages Router is useful for building multi-page applications with stable URLs, shared layouts, and deep links.
- 2Both routers map files to URLs, but they use different rendering and data-fetching models and should not be mixed mentally.
- 3A team should use it when the requirement matches its responsibility in routing.
- 4It should fit the surrounding route, data, security, and deployment design instead of being added in isolation.
- 5A successful implementation is visible through correct URLs, predictable layouts, and navigation without full-page reloads.
Common Mistakes
- 1Copying getServerSideProps, _app, or Pages Router examples into the app directory leads to invalid architecture.
- 2Copying an example without identifying which code runs on the server and which code reaches the browser.
- 3Handling only the happy path and forgetting loading, empty, invalid, unauthorized, and failed states.
- 4Adding client state or third-party libraries before confirming that built-in Next.js and browser features are insufficient.
- 5Skipping verification in a production build, where caching and runtime behavior can differ from development.
Best Practices
- 1Use the App Router for new applications unless a dependency or migration constraint requires the Pages Router.
- 2Keep the owning route, component, server function, and validation responsibility easy to identify.
- 3Use server-side code for trusted data and secrets; send only the data required by interactive browser components.
- 4Make loading, empty, success, and error states explicit for the user.
- 5Identify the router from the project folders, then use only the APIs and special files supported by that router.
What it means
- 1The App Router uses the app directory, nested layouts, Server Components, loading and error files, and modern data patterns. The Pages Router uses the pages directory and older page-level data functions.
- 2The important question is not only what syntax to write, but what responsibility this feature owns.
- 3Its behavior should be understood in development, during a production build, and after deployment.
- 4Before implementing it, decide what input it receives, what result it produces, and how failure is shown.
How it works
- 1Both routers map files to URLs, but they use different rendering and data-fetching models and should not be mixed mentally.
- 2Next.js uses file and component boundaries to decide routing, server execution, browser execution, and caching.
- 3Data should cross each boundary in a small, serializable, and validated form.
- 4The final result should remain understandable when a user refreshes the page or opens the URL directly.
Step-by-step approach
- 1Create the smallest route or component that demonstrates App Router vs Pages Router.
- 2Add one realistic input or data source and show the successful result.
- 3Add the most likely failure case and display a useful response.
- 4Run this check: Identify the router from the project folders, then use only the APIs and special files supported by that router.
Production checklist
- 1Confirm server-only values and secrets never enter the browser bundle.
- 2Confirm direct URLs, refreshes, loading states, and errors behave correctly.
- 3Confirm caching and revalidation match the required data freshness.
- 4Measure the result using correct URLs, predictable layouts, and navigation without full-page reloads.
Quick Summary
- The App Router uses the app directory, nested layouts, Server Components, loading and error files, and modern data patterns. The Pages Router uses the pages directory and older page-level data functions.
- Both routers map files to URLs, but they use different rendering and data-fetching models and should not be mixed mentally.
- Recommended approach: Use the App Router for new applications unless a dependency or migration constraint requires the Pages Router.
- Main mistake to avoid: Copying getServerSideProps, _app, or Pages Router examples into the app directory leads to invalid architecture.
- Verify it by doing the following: Identify the router from the project folders, then use only the APIs and special files supported by that router.
Interview Questions
Q1. What is App Router vs Pages Router?
Answer: The App Router uses the app directory, nested layouts, Server Components, loading and error files, and modern data patterns. The Pages Router uses the pages directory and older page-level data functions.
Q2. How does App Router vs Pages Router work in Next.js?
Answer: Both routers map files to URLs, but they use different rendering and data-fetching models and should not be mixed mentally.
Q3. When should you use App Router vs Pages Router?
Answer: Use it for building multi-page applications with stable URLs, shared layouts, and deep links, when that responsibility belongs inside the Next.js application.
Q4. What is a common mistake with App Router vs Pages Router?
Answer: Copying getServerSideProps, _app, or Pages Router examples into the app directory leads to invalid architecture.
Q5. How would you test App Router vs Pages Router?
Answer: Identify the router from the project folders, then use only the APIs and special files supported by that router. The result should demonstrate correct URLs, predictable layouts, and navigation without full-page reloads.
Quiz
Which approach is best when implementing App Router vs Pages Router?