Чим app відрізняється від pages у Next.js?

Next.jsMiddle~1 хв читання

Коротко: app - сучасний, потужний і "правильний" шлях, pages - старий, зрозумілий і все ще робочий.

Тепер розкладемо чітко і без води, щоб було зрозуміло коли і навіщо.

Загальне

У Next.js є два роутери:

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

Сторінка = компонент

Сторінка = дерево сегментів (layout → loading → error → page)

getServerSideProps
getStaticProps
getInitialProps

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

Прямо в компоненті, без прокладок.

txt

app/
 ├─ layout.tsx          # global
 └─ dashboard/
     └─ layout.tsx      # тільки для /dashboard/*

"use server";

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

У pages цього немає.

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.