Чем App Router в Next.js отличается от Pages Router?

App Router — маршрутизатор Next.js на основе папки app/ и React Server Components, Pages Router — классический на основе папки pages/ с getServerSideProps и getStaticProps.

Ключевые отличия

• Компоненты по умолчанию серверные. В app/ они выполняются на сервере и не попадают в клиентский бандл, интерактивность включается директивой 'use client'.
• Вложенные layout. Общие обёртки не перерисовываются и сохраняют состояние при навигации.
• Загрузка данных прямо в компонентах через async/await вместо специальных функций страницы.
• Специальные файлы: layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx.
• Streaming и Suspense из коробки.
• Server Actions для мутаций без отдельного API-маршрута.

// app/users/page.tsx — серверный компонент
export default async function UsersPage() {
  const users = await db.user.findMany();
  return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}

Совместимость

Оба роутера могут сосуществовать в одном проекте, что упрощает постепенную миграцию.

Коротко для собеседования

App Router делает серверные компоненты и вложенные layout основой, а Pages Router работает на специальных функциях страницы. Новый код пишут на App Router.