Pages Router and App Router
Search for a Next.js answer and half the results use getServerSideProps and a pages folder, while the other half use async components in an app folder. Both are correct, for different routers. Next.js has shipped two routing systems, and you need to recognise which one a piece of code belongs to.
The rule
pagesis the older router;appis the current one. Check the folder first.
The Pages Router (the original, still supported) lives in a pages folder. Each file is a route, and data is loaded by special exported functions that run on the server and pass props to the page.
// pages/trails/[slug].tsx → /trails/misty-ridge
export async function getStaticProps({ params }) {
return { props: { trail: await getTrail(params.slug) } };
}
export default function Trail({ trail }) {
return <h1>{trail.name}</h1>;
}Other Pages Router markers: getServerSideProps (render per request), getStaticPaths, _app.tsx and _document.tsx for the shared shell, API endpoints in pages/api, and useRouter from next/router.
The App Router (introduced in Next.js 13, and the recommended choice for new work) lives in an app folder. Each folder is a segment and a page.tsx makes it public. Components are React Server Components by default, so a page can load its own data.
// app/trails/[slug]/page.tsx → /trails/misty-ridge
export default async function Trail({ params }) {
const { slug } = await params;
const trail = await getTrail(slug);
return <h1>{trail.name}</h1>;
}App Router markers: page.tsx, layout.tsx, loading.tsx, route.ts, "use client", and useRouter from next/navigation.
Both folders can exist in one project, which lets teams migrate one route at a time. The same URL must not be defined in both.
The shortcut
Before using any snippet, look for a fingerprint: a get…Props function or a pages/ path means Pages Router; an async page, page.tsx or "use client" means App Router. Do not mix a snippet from one into the other.
Look at the path
pages/about.tsx: a file named after the route. Pages Router.
The trap is pasting getServerSideProps into app/…/page.tsx. The App Router does not support it, so instead of loading your data you get an error. Rewrite the loading as an await inside the page.
Drills
Answer fast — trust the rule.
Which file serves /about in the Pages Router?
Which function belongs only to the Pages Router?
Can a project use both pages and app at the same time?
How does an App Router page load its data?
Remember
pagesis the older router (files as routes,get…Props);appis the current one (folders, async server components).- Shortcut: check the fingerprint before using a snippet.
- Trap: Pages Router data functions are not supported inside the App Router.