App Router и Pages Router: обзор

Разбираемся, почему в Next.js два «роутера» и почему для нового кода берут App Router.

App Router — современная система маршрутизации на папке app/ с серверными компонентами; Pages Router — классический подход на папке pages/, который остаётся для совместимости.

Два пути исторически

До версии 13 единственным способом была папка pages/: каждый файл — это маршрут, а данные грузились через специальные функции getServerSideProps и getStaticProps. С версии 13 появился App Router (папка app/) с серверными компонентами — это рекомендованный подход для нового кода.

Сравнение

Как выглядит страница в каждом

App Router — серверный компонент по умолчанию, данные можно грузить прямо в нём:

// app/about/page.tsx
export default function AboutPage() {
  return <h1>О нас</h1>;
}

Pages Router — обычный компонент, данные приходят через специальную функцию:

// pages/about.tsx
export default function AboutPage({ title }) {
  return <h1>{title}</h1>;
}

export async function getServerSideProps() {
  return { props: { title: "О нас" } };
}

Что выбирать

Для нового проекта — App Router: он даёт серверные компоненты, удобную вложенную маршрутизацию и встроенное кэширование. Pages Router стоит знать, потому что им написана масса существующих проектов и многих библиотек, но начинать с него для нового кода смысла нет. Весь дальнейший курс строится на App Router.

Итог

• App Router (app/) — современный, серверные компоненты по умолчанию, рекомендован.
• Pages Router (pages/) — классический, данные через getServerSideProps/getStaticProps.
• Для нового кода — App Router; Pages Router — знать для совместимости.