Learn the concept
File-Based Routing
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 | Opt-in via "use cache" (v16) |
Next.js 16 Caching Model:
Caching is explicit and opt-in using the \"use cache\" directive. There is no implicit caching of fetch requests. Use cacheLife() for time-based profiles and cacheTag() for on-demand revalidation.
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>
);
}Running Pages Router and App Router side-by-side to incrementally migrate a large production app without rewrites
Using App Router nested layouts for persistent sidebar, header, and tab navigation across dashboard sections
Using App Router loading.tsx and Suspense for progressive content loading in data-heavy applications
Take a simple Pages Router app with getServerSideProps and migrate it to App Router with Server Components and streaming
Build a SaaS app with root layout (nav), dashboard layout (sidebar), and settings layout (tabs) using App Router