Pages Router

## 1. Learning Objectives By the end of this lesson, you will be able to: - Explain how the Pages Router maps files under `pages` to URLs. - Recognize `getStaticProps`, `getServerSideProps`, and API routes. - Compare Pages Router conventions with App Router conventions. - Decide when to maintain, migrate, or avoid the Pages Router. Difficulty: Beginner. ## 2. Prerequisites - Basic Next.js introduction. - App Router basics. - React component fundamentals. ## 3. Overview The Pages Router is the older Next.js routing system based on the `pages` directory. It is still common in existing applications and uses files like `pages/index.tsx`, `pages/blog/[slug].tsx`, and `pages/api/health.ts`. ## 4. Why This Topic Matters Many production Next.js apps were built before the App Router existed. Understanding the Pages Router helps you read legacy projects, debug migrations, and recognize older data-fetching APIs in interviews and real codebases. ## 5. Real-World Analogy The Pages Router is like an older city street grid: simple, predictable, and widely understood. The App Router is a newer transit system with shared stations, nested routes, and streaming support. You may need to navigate both. ## 6. Core Concepts | Pages Router Concept | App Router Equivalent | |---|---| | `pages/index.tsx` | `app/page.tsx` | | `pages/about.tsx` | `app/about/page.tsx` | | `pages/_app.tsx` | Root layout and providers | | `pages/_document.tsx` | Root HTML customization in layout | | `getStaticProps` | Server Component fetch or static generation APIs | | `getServerSideProps` | Server Component per-request rendering | | `pages/api/*.ts` | `app/api/**/route.ts` | ## 7. Syntax & API Reference

## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? `getStaticProps` runs at build time and passes props into the page component. ## 10. Interactive Playground Try this in an older Next.js project or a sandbox: - Create `pages/index.tsx`. - Add `pages/products/[id].tsx`. - Compare the same route in `app/products/[id]/page.tsx`. ## 11. Common Mistakes | Mistake | Why It Happens | Correct Approach | |---|---|---| | Mixing App Router APIs in Pages Router files | The two routers have different conventions. | Use router-specific APIs in the correct directory. | | Expecting Server Components in `pages` | Pages Router predates Server Components. | Use App Router for Server Component-first architecture. | | Forgetting `_app.tsx` wraps all pages | Shared providers often live there. | Check `_app.tsx` when debugging global behavior. | ## 12. Best Practices - Prefer App Router for new applications. - Maintain Pages Router apps carefully when migration cost is high. - Migrate route by route rather than rewriting everything at once. - Keep Pages Router data functions simple and explicit. - Avoid duplicating route paths across `app` and `pages`. ## 13. Browser Compatibility | Feature | Browser Impact | Notes | |---|---|---| | SSG with `getStaticProps` | Static HTML | Broad compatibility. | | SSR with `getServerSideProps` | Server-rendered HTML | Broad compatibility. | | Client-side navigation | Requires JavaScript | Uses Next.js router in browser. | ## 14. Interview Questions **Easy:** Which folder powers the Pages Router? Answer: `pages`. **Medium:** What is `getServerSideProps` used for? Answer: It fetches data on each request and passes it as props to the page. **Hard:** Why would a company keep using the Pages Router? Answer: Existing apps may be stable, large, and expensive to migrate. The Pages Router is still recognizable and may be sufficient for the product. ## 15. Debugging Exercise Broken assumption:

Solution In the Pages Router, use `getServerSideProps` or `getStaticProps` for page-level data instead of making the page component itself an async Server Component. ## 16. Practice Exercises - Easy: Create `pages/about.tsx`. - Medium: Create a dynamic `pages/products/[id].tsx` route. - Hard: Convert one Pages Router route into its App Router equivalent. ## 17. Scenario-Based Challenge You inherit a Pages Router ecommerce app. Product pages need better streaming and nested layouts. What do you do? Walkthrough Keep stable routes in `pages`, create new or migrated product routes in `app`, move shared shells into layouts, and verify no duplicate route conflicts exist. ## 18. Quick Quiz 1. What file maps to `/` in Pages Router? Answer: `pages/index.tsx`. 2. What file wraps all pages? Answer: `pages/_app.tsx`. 3. What creates `/api/health`? Answer: `pages/api/health.ts`. 4. Does Pages Router use `page.tsx` conventions? Answer: No. 5. Is App Router preferred for new apps? Answer: Yes. ## 19. Summary & Key Takeaways - Pages Router is legacy but still common. - Files under `pages` map directly to routes. - Data fetching uses `getStaticProps`, `getStaticPaths`, and `getServerSideProps`. - API routes live under `pages/api`. - New apps should generally start with App Router. ## 20. Cheat Sheet | Pages File | URL | |---|---| | `pages/index.tsx` | `/` | | `pages/about.tsx` | `/about` | | `pages/blog/[slug].tsx` | `/blog/:slug` | | `pages/api/health.ts` | `/api/health` | ## 21. Further Reading - Next.js Docs: Pages Router. - Next.js Docs: Migrating to App Router. - Next.js Docs: Data Fetching in Pages Router. ## 22. Next Lesson Preview Next, you will focus on file routing itself: static routes, dynamic segments, catch-all paths, route groups, and how URL structure emerges from folders.