Pages Router uses the `pages/` directory with getServerSideProps/getStaticProps for data fetching, while App Router uses the `app/` directory with React Server Components, nested layouts, and streaming - and is the recommended approach for new projects.
Pages Router (Legacy):
pages/pages/about.tsx → /about)getStaticProps, getServerSideProps, getStaticPaths_app.tsx for global layout_document.tsx for HTML structureApp Router (Recommended):
app/page.tsxlayout.tsxloading.tsxerror.tsxasync/awaitKey Differences:
| Feature | Pages Router | App Router |
|---------|-------------|------------|
| Default Components | Client | Server |
| Layouts | Single _app | Nested layout.tsx |
| Data Fetching | Special functions | async components |
| Streaming | Limited | Built-in |
| Caching | Manual | Automatic |
Migration: Both can coexist in the same project for gradual migration.
// pages/posts/[id].tsx - Pages Router
import { GetServerSideProps } from 'next';
type Props = {
post: { title: string; content: string };
};
// Data fetching via special function
export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
const { id } = ctx.params;
const res = await fetch(`https://api.example.com/posts/${id}`);
const post = await res.json();
return { props: { post } };
};
// Component receives props from getServerSideProps
export default function PostPage({ post }: Props) {
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}