App Router: адрес — это папка

Корень маршрутизации — папка app. Правило внутри неё одно и короткое: папка — это сегмент адреса, а файл page.tsx внутри — сама страница. Папка без page.tsx адреса не даёт: она либо участок пути к тому, что лежит глубже, либо просто склад для соседних файлов.

Песочница учебника маршруты Next.js не запускает: там нет ни сервера, ни файловой системы, ни самого Next. Компоненты страниц и раскладок она вызывает по-настоящему, а вот дерево папок приходится изображать руками — списком путей, из которого примеры считают адреса.

Проверим правило на списке файлов — соберём из путей адреса сами, тем же способом, каким это делает Next при старте: он смотрит на дерево и строит карту.

const files = [
  "app/page.tsx",
  "app/about/page.tsx",
  "app/blog/page.tsx",
  "app/blog/post-card.tsx",
  "app/dashboard/settings/page.tsx",
  "app/lib/format.ts"
];

// адрес получает только файл page: у остальных имён этой силы нет
function toRoute(file: string): string | null {
  if (!file.endsWith("/page.tsx")) return null;
  // отрезаем корневую папку слева и имя файла справа — остаётся адрес
  const inside = file.slice("app".length, -"/page.tsx".length);
  return inside === "" ? "/" : inside;
}

console.log(files.map(toRoute).filter((route) => route !== null));

Шесть файлов — четыре адреса. post-card.tsx и lib/format.ts не стали ничем: зарезервировано имя page, остальные имена Next не трогает. Поэтому компонент, стили и тест кладут в ту же папку, что и страницу, — они не «протекут» наружу адресом.

Второго источника правды у адреса не появляется. Переименовали папку — поменялся адрес; перенесли — тоже. Обратный ход так же прост: увидели в браузере /blog/posts — открываете app/blog/posts/page.tsx, искать нечего.

app можно держать внутри src: тогда путь — src/app/about/page.tsx, а адрес остаётся /about. У самого учебника app лежит рядом с src: в app только маршруты, компоненты — в src.

Внутри page.tsx — обычный компонент из первой главы этой части: функция, возвращающая разметку. Особенных обстоятельств ровно два: имя файла и экспорт по умолчанию.

// app/about/page.tsx
function AboutPage() {
  return (
    <main>
      <h1>Обо мне</h1>
      <p>Пишу учебник по JavaScript.</p>
    </main>
  );
}

// это делает Next, когда браузер просит /about
ReactDOM.createRoot(document.getElementById("root")!).render(<AboutPage />);

В настоящем page.tsx перед функцией стоит export default. Песочница выполняет один файл без модулей, поэтому в примерах это слово опущено — во всём остальном код тот же.

Имя функции Next не смотрит: AboutPage, Page или Whatever — всё равно. А вот экспорт обязан быть умолчательным: фреймворк импортирует файл сам и договариваться об имени ему не с кем. Именованный экспорт вместо export default — ошибка первого дня: Next пожалуется, что в файле страницы нет компонента по умолчанию.

Расширение годится любое из .tsx, .ts, .jsx, .js — важно имя, и совпадать оно должно целиком. page.module.css, page.test.tsx и page-header.tsx адреса не создают.

Шапка, меню и подвал на каждой странице — старая задача: в части II их вписывали в разметку руками и следили, чтобы перерисовка списка их не снесла. В Next для этого есть layout.tsx — тоже обычный компонент, но с обязательным пропом children.

// app/layout.tsx
function RootLayout({ children }: { children: React.ReactNode }) {
  console.log("раскладка");
  return (
    <div>
      <header>Учебник</header>
      <main>{children}</main>
    </div>
  );
}

// app/about/page.tsx
function AboutPage() {
  console.log("страница");
  return <h1>Обо мне</h1>;
}

// такую пару Next собирает сам — из двух файлов, лежащих в разных папках
ReactDOM.createRoot(document.getElementById("root")!).render(
  <RootLayout>
    <AboutPage />
  </RootLayout>
);

Порядок в выводе не случаен: раскладка вызывается первой, страница — внутри неё. При этом раскладка о странице не знает ничего: в children приезжает готовый элемент, как в любую вашу обёртку из главы про пропсы. Разница одна — пару <RootLayout> и <AboutPage /> здесь написали вы, а в Next её собирает фреймворк из двух файлов, лежащих в разных папках.

Тип children — React.ReactNode: внутрь может приехать что угодно, от одного элемента до списка. Объявить проп и не отрисовать его компилятор не мешает, и это стоит увидеть.

// app/layout.tsx
function RootLayout({ children }: { children: React.ReactNode }) {
  console.log("раскладка отрисовалась");
  return (
    <div>
      <header>Учебник</header>
      <footer>2026</footer>
    </div>
  );
}

// app/about/page.tsx
function AboutPage() {
  console.log("страница отрисовалась");
  return <h1>Обо мне</h1>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <RootLayout>
    <AboutPage />
  </RootLayout>
);

В выводе одна строка — от раскладки, а страница промолчала; в кадре — шапка и подвал без содержимого. Ошибки нет ни у компилятора, ни в браузере: элемент <AboutPage /> создали, но в разметку не вернули, и React не стал вызывать её функцию — вторую строку печатать было некому. Если в Next вместо страницы показан общий каркас, ищите пропавший {children}.

Корневая раскладка app/layout.tsx обязательна, и она единственная, где встречаются <html> и <body>: в Next нет файла-шаблона, эти теги возвращает компонент.

// app/layout.tsx — корневая раскладка целиком, как она лежит в проекте
function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ru">
      <body>
        <header>java-script.pro</header>
        {children}
        <footer>2026</footer>
      </body>
    </html>
  );
}

Этот файл дан листингом, без кнопки запуска: <html> внутрь страницы не смонтировать, а маршрутов в песочнице нет вовсе. Что он делает, видно только в работающем Next — там каждая страница сайта приезжает внутри этих <html> и <body>, и подделывать это запуском мы не станем.

Раскладка лежит не только в корне: app/dashboard/layout.tsx обернёт всё, что ниже /dashboard. Уровень раскладки задаётся папкой — ровно как адрес. Про вложенные раскладки, группы и шаблоны — следующая статья.

Для каждого адреса Next собирает цепочку файлов: от корневой раскладки вниз до страницы. Правило то же — идём по сегментам и берём то, что нашли.

const files = new Set([
  "app/layout.tsx",
  "app/page.tsx",
  "app/dashboard/layout.tsx",
  "app/dashboard/page.tsx",
  "app/dashboard/settings/page.tsx"
]);

// Next спускается от корня по сегментам адреса и надевает на страницу
// каждую раскладку, которая встретилась по дороге
function chain(url: string): string[] {
  const result: string[] = [];
  let dir = "app";
  if (files.has(dir + "/layout.tsx")) result.push(dir + "/layout.tsx");
  for (const segment of url.split("/").filter(Boolean)) {
    dir += "/" + segment;
    if (files.has(dir + "/layout.tsx")) result.push(dir + "/layout.tsx");
  }
  result.push(dir + "/page.tsx");
  return result;
}

console.log(chain("/dashboard/settings").join(" → "));
console.log(chain("/").join(" → "));

Обратите внимание, чего в цепочке нет: у settings своей раскладки нет, и никто её не требует. Раскладку заводят там, где нужна общая обёртка, а не на каждом уровне.

Цепочка — это вложенность: первый файл снаружи, страница внутри всех остальных. В компонентах она выглядит так.

// каждая функция печатает имя файла, который она изображает
function RootLayout({ children }: { children: React.ReactNode }) {
  console.log("app/layout.tsx");
  return (
    <div style={{ border: "1px solid #999", padding: 8 }}>
      <header>Учебник</header>
      {children}
    </div>
  );
}

function DashboardLayout({ children }: { children: React.ReactNode }) {
  console.log("app/dashboard/layout.tsx");
  return (
    <section style={{ border: "1px dashed #999", padding: 8 }}>
      <nav>Кабинет</nav>
      {children}
    </section>
  );
}

function SettingsPage() {
  console.log("app/dashboard/settings/page.tsx");
  return <h1>Настройки</h1>;
}

// эту вложенность Next строит сам, по дереву папок
ReactDOM.createRoot(document.getElementById("root")!).render(
  <RootLayout>
    <DashboardLayout>
      <SettingsPage />
    </DashboardLayout>
  </RootLayout>
);

Три вызова снаружи внутрь — тот же порядок, в каком файлы стояли в цепочке, и две рамки в кадре показывают то же самое. Разница только одна: в Next эту разметку никто не пишет руками — её форму задаёт дерево папок.

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

Файлы loading.tsx, error.tsx и not-found.tsx разбирает отдельная статья этой главы — там же видно, почему они лежат в папке сегмента, а не в одном месте на весь проект.

У имён папок тоже бывает смысл, и о нём стоит знать заранее — иначе случайные скобки в имени превращаются в загадку.

Всё остальное — ваши файлы, и лежать они могут прямо рядом со страницей: компонент, модуль стилей, тест, маленькая функция для этой одной страницы. Адрес создаётся именем, а не расположением, поэтому в app безопасно селиться чему угодно — а искать код становится проще, когда он лежит там же, где страница, которая его использует.