Next.js Pages

Next.js Pages: Managing Legacy Pages Router and App Router

Next.js Pages explains the legacy pages/ directory architecture and how it compares to the modern App Router framework. Understanding both routers allows developers to maintain existing applications while migrating to modern React standards.

The Pages Router was the standard routing mechanism in Next.js before version 13. It relies on files inside the pages/ directory to construct routes and handles data fetching with special functions like getServerSideProps and getStaticProps.

Comparing Routers Side-by-Side

Legacy Pages Router Example

In the Pages Router, data fetching requires exporting dedicated functions alongside page components:

// pages/products/[id].tsx (Legacy Pages Router)
import { GetServerSideProps } from 'next';

interface Product {
  id: string;
  name: string;
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const id = context.params?.id;
  const res = await fetch(`https://api.example.com/products/${id}`);
  const product = await res.json();

  return { props: { product } };
};

export default function ProductPage({ product }: { product: Product }) {
  return (
    <div>
      <h1>{product.name}</h1>
    </div>
  );
}

Modern App Router Equivalent

In the App Router, data fetching happens directly inside async React Server Components:

// app/products/[id]/page.tsx (Modern App Router)
interface PageProps {
  params: Promise<{ id: string }>;
}

export default async function ProductPage({ params }: PageProps) {
  const { id } = await params;
  const res = await fetch(`https://api.example.com/products/${id}`);
  const product = await res.json();

  return (
    <div>
      <h1>{product.name}</h1>
    </div>
  );
}

Incremental Migration Strategy

Next.js allows both pages/ and app/ directories to co-exist in the same codebase:

1. Keep legacy pages untouched inside pages/.
2. Build all newly requested features inside app/.
3. Slowly migrate legacy routes one folder at a time.

Summary

The legacy Pages Router laid the foundation for Next.js, while the App Router provides faster execution and simpler data fetching. Incremental adoption lets you upgrade applications without breaking existing workflows.