How does app differ from pages in Next.js?

Next.jsMiddle~1 min read

In short: app is the modern, powerful, and "correct" path, pages is the old, familiar, and still working one.

Now let's break it down clearly and without filler, so it's clear when and why.

General

In Next.js there are two routers:

	`pages`	`app`
Status	legacy	main (recommended)
Approach	React + SPA	React Server Components
Year introduced	~2016	2023+
Future	still supported	this is where development goes

pages/
 ├─ index.tsx      → /
 ├─ blog.tsx       → /blog
 └─ users/[id].tsx → /users/1

export async function getServerSideProps() {
  return { props: { data } }
}

app/
 ├─ layout.tsx
 ├─ page.tsx        → /
 ├─ blog/
 │   └─ page.tsx    → /blog
 └─ users/[id]/
     └─ page.tsx    → /users/1

Page = component

Page = tree of segments (layout → loading → error → page)

getServerSideProps
getStaticProps
getInitialProps

const data = await fetch(...)
const data = await prisma.task.findMany()

Directly in the component, with no wrappers.

txt

app/
 ├─ layout.tsx          # global
 └─ dashboard/
     └─ layout.tsx      # only for /dashboard/*

"use server";

export async function submit(formData: FormData) {
  await prisma.task.create(...)
}

pages does not have this.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.