ReviseAlgo Logo

Fundamentals

Pages Router

Learn the legacy Next.js Pages Router, its file conventions, and how it differs from the App 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 ConceptApp Router Equivalent
    pages/index.tsxapp/page.tsx
    pages/about.tsxapp/about/page.tsx
    pages/_app.tsxRoot layout and providers
    pages/_document.tsxRoot HTML customization in layout
    getStaticPropsServer Component fetch or static generation APIs
    getServerSidePropsServer Component per-request rendering
    pages/api/*.tsapp/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

    MistakeWhy It HappensCorrect Approach
    Mixing App Router APIs in Pages Router filesThe two routers have different conventions.Use router-specific APIs in the correct directory.
    Expecting Server Components in pagesPages Router predates Server Components.Use App Router for Server Component-first architecture.
    Forgetting _app.tsx wraps all pagesShared 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

    FeatureBrowser ImpactNotes
    SSG with getStaticPropsStatic HTMLBroad compatibility.
    SSR with getServerSidePropsServer-rendered HTMLBroad compatibility.
    Client-side navigationRequires JavaScriptUses 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 FileURL
    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.