Frontend Academy · Урок

Маршрутизатор Pages и маршрутизатор App

Сравните подходы Next.js к маршрутизации: файловый маршрутизатор Pages и новый маршрутизатор App с вложенными макетами, состояниями загрузки и границами ошибок

Урок 1 из 413 шагов

«Маршрутизатор Pages и маршрутизатор App» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Две системы маршрутизации, один фреймворк

В Next.js есть две системы маршрутизации: исходная Pages Router — каталог pages/ — и более новая App Router — каталог app/, Next 13+. Обе по-прежнему работают в Next 14/15.

Pages Router — маршрутизация на основе файлов

Каждый файл в pages/ становится маршрутом. Для динамических сегментов используются квадратные скобки: pages/users/[id].tsx соответствует /users/123.

pages/
  index.tsx        // route: /
  about.tsx        // route: /about
  blog/
    index.tsx      // route: /blog
    [slug].tsx     // route: /blog/:slug
  api/
    users.ts       // API route: /api/users

Pages Router — получение данных

Специальные экспорты объявляют поведение получения данных: getStaticProps (SSG), getServerSideProps (SSR), getStaticPaths (SSG с динамическими маршрутами).

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function Post({ post }) {
  return <article>{post.body}</article>;
}

App Router — маршрутизация на основе папок

App Router использует папки как сегменты маршрутов. Файл page.tsx внутри папки определяет страницу.

app/
  layout.tsx       // shared root layout
  page.tsx         // route: /
  about/
    page.tsx       // route: /about
  blog/
    page.tsx       // route: /blog
    [slug]/
      page.tsx     // route: /blog/:slug

App Router — специальные файлы

Файлы для каждого сегмента предоставляют мощные примитивы: layout.tsx — постоянный интерфейс вокруг дочерних элементов, loading.tsx — резервный интерфейс Suspense, error.tsx — граница обработки ошибок, not-found.tsx.

Вложенные макеты

Макеты App Router оборачивают вложенные маршруты и сохраняются при навигации — повторного монтирования не происходит.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/settings/page.tsx renders inside the Sidebar layout

Получение данных в App Router

Серверные компоненты могут быть асинхронными и получать данные напрямую — getServerSideProps и getStaticProps не нужны. Компонент выполняется на сервере и отправляет клиенту только HTML.

// app/posts/[slug]/page.tsx (Server Component by default)
export default async function Post({ params }) {
  const post = await fetch(`https://api/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR-like caching
  }).then(r => r.json());
  return <article>{post.body}</article>;
}

Клиентские компоненты в App Router

Добавьте 'use client' в начало файла, чтобы пометить его компонент как клиентский — интерактивный компонент, выполняющийся в браузере.

// app/Counter.tsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Маршруты API и обработчики маршрутов

Pages Router: pages/api/users.ts экспортирует функцию по умолчанию с req/res. App Router: app/api/users/route.ts экспортирует методы HTTP (GET, POST) как именованные экспорты, используя стандартные Request/Response.

// app/api/users/route.ts
export async function GET(request: Request) {
  const users = await db.users.findMany();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return Response.json(user, { status: 201 });
}

Стратегия миграции

Обе системы маршрутизации могут сосуществовать в одном проекте — переносите страницы постепенно, по одной. При конфликте приоритет имеет App Router.

Когда что использовать

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

Быстрая проверка

Как отметить компонент как клиентский компонент в маршрутизаторе приложения Next.js?

Ответь в интерактивном уроке

Итоги: маршрутизатор страниц и маршрутизатор приложения

Маршрутизатор страниц: на основе файлов, getStaticProps/getServerSideProps. Маршрутизатор приложения (Next 13+): на основе папок, асинхронные серверные компоненты, вложенные макеты, файлы загрузки и ошибок. Помечайте клиентскую интерактивность директивой 'use client'. Маршруты API: pages/api/* против app/api/*/route.ts с экспортами методов HTTP. Оба подхода сосуществуют, но активная разработка ведётся для маршрутизатора приложения.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 41
Уроки: 163

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Маршрутизатор Pages и маршрутизатор App» бесплатный?

Да — полный текст урока «Маршрутизатор Pages и маршрутизатор App» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Маршрутизатор Pages и маршрутизатор App»?

Сравните подходы Next.js к маршрутизации: файловый маршрутизатор Pages и новый маршрутизатор App с вложенными макетами, состояниями загрузки и границами ошибок Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Маршрутизатор Pages и маршрутизатор App»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy