Лекции
Начать
Начать обучение
JavaRush /Курсы /Модуль 4: Node.js, Next.js и Angular /Структура проекта App Router: папка

Структура проекта App Router: папка app/ в Next.js 15

Модуль 4: Node.js, Next.js и Angular
7 уровень , 2 лекция
Открыта

1. Введение

Если вы раньше работали с Next.js (или просто смотрели туториалы), то наверняка видели, что все страницы раньше лежали в папке pages/. Там всё просто: создал файл about.js, и у тебя сразу появляется маршрут /about.

В Next.js 13+ (и особенно в 15) появился новый подход — App Router. Теперь корнем вашего приложения становится папка app/. Именно она задаёт структуру всех маршрутов, страниц, layout-ов и даже API-эндпоинтов. Всё, что связано с навигацией и отображением контента, теперь строится вокруг этой папки.

Аналогия: Если раньше проект был как большой шкаф с кучей полок (pages/), то теперь это модульный конструктор, где каждый блок (app/segment/page.tsx) — это не просто страница, а часть архитектуры, которую можно свободно перестраивать, вкладывать друг в друга, делить и комбинировать.

Как выглядит структура проекта с App Router?


my-next-app/
├── app/
│   ├── page.tsx
│   ├── layout.tsx
│   ├── about/
│   │   ├── page.tsx
│   │   └── team/
│   │       └── page.tsx
│   ├── blog/
│   │   ├── page.tsx
│   │   └── [slug]/
│   │       └── page.tsx
│   ├── api/
│   │   └── hello/
│   │       └── route.ts
│   └── globals.css
├── public/
├── next.config.js
├── package.json
└── ... (другие файлы)

Ключевые элементы:

  • app/ — корневая папка маршрутизации, всё начинается отсюда.
  • page.tsx — файл страницы, обозначает конечную точку маршрута.
  • layout.tsx — файл layout-а, задаёт общий "каркас" для вложенных страниц.
  • Директории — каждая папка внутри app/ — это сегмент маршрута (например, about/, blog/).
  • Динамические сегменты — папки с именем в квадратных скобках, например, [slug]/ (подробнее о них — в будущих лекциях).
  • API-роуты — теперь тоже могут жить внутри app/, например, api/hello/route.ts.
Python-университет

2. Как работает маршрутизация в папке app/?

Всё супер просто и одновременно очень мощно:

  • Каждая папка внутри app/ — это часть URL.
  • Файл page.tsx внутри папки — это страница, которая показывается по этому маршруту.
  • Файл layout.tsx — задаёт общий layout для всех вложенных страниц и layout-ов (можно вкладывать сколько угодно уровней).
  • Можно создавать вложенные папки — иерархия папок = иерархия маршрутов.

Пример:


app/
├── page.tsx           // / (корень)
├── about/
│   └── page.tsx       // /about
├── blog/
│   ├── page.tsx       // /blog
│   └── [slug]/
│       └── page.tsx   // /blog/любое-значение

Пояснение:

  • http://localhost:3000/ — откроет app/page.tsx
  • http://localhost:3000/about — откроет app/about/page.tsx
  • http://localhost:3000/blog — откроет app/blog/page.tsx
  • http://localhost:3000/blog/hello-world — откроет app/blog/[slug]/page.tsx

3. Что такое layout, page, template, error, loading и т.д.?

Next.js 15 добавляет новые специальные файлы, которые можно использовать внутри любой папки в app/. Вот самые важные из них:

Файл Назначение 
page.tsx
 Главная страница для текущего сегмента маршрута 
layout.tsx
 Общий layout для всех вложенных страниц/сегментов 
template.tsx
 Альтернатива layout, создаёт новый экземпляр при каждой навигации 
error.tsx
 Обработка ошибок для этого сегмента 
loading.tsx
 Компонент-заглушка, показывается во время загрузки 
not-found.tsx
 Отдельная страница для 404 внутри сегмента 
head.tsx
 Генерация метатегов, title и т.п. для страницы или сегмента

Не обязательно использовать все эти файлы в каждом сегменте. Обычно хватает layout.tsx и page.tsx.

Пример: минимальный layout + страница

app/layout.tsx


// Общий layout для всех страниц
export default function RootLayout({ children }) {
  return (
    <html lang="ru">
      <body>
        <header>Мой сайт</header>
        <main>{children}</main>
        <footer>© 2025</footer>
      </body>
    </html>
  );
}

app/page.tsx


export default function HomePage() {
  return <h1>Добро пожаловать на главную!</h1>;
}

Что будет на сайте?
На всех страницах будет общий header и footer.
Внутри <main> будет отображаться содержимое текущей страницы (page.tsx).

4. Как создавать новые страницы и маршруты?

  1. Создайте папку в app/ с нужным именем маршрута (например, about/).
  2. Добавьте в неё файл page.tsx — это и будет ваша страница.
  3. (Необязательно) Добавьте layout.tsx, если нужен отдельный layout для этой секции.

Пример: Страница "О нас"

app/
├── about/
│   └── page.tsx

app/about/page.tsx


export default function AboutPage() {
  return <h2>О компании: мы любим писать код!</h2>;
}

Теперь по адресу /about откроется эта страница.

5. Вложенные маршруты и layout-ы

В Next.js 15 layout-ы можно вкладывать сколько угодно раз. Это удобно для больших сайтов, где, например, у раздела "Блог" свой sidebar, а у раздела "Магазин" — своя навигация.

Пример структуры:


app/
├── layout.tsx              // Главный layout (шапка, подвал)
├── blog/
│   ├── layout.tsx          // Layout только для блога (например, sidebar)
│   ├── page.tsx            // /blog
│   └── [slug]/
│       └── page.tsx        // /blog/любая-статья

app/blog/layout.tsx


export default function BlogLayout({ children }) {
  return (
    <section>
      <aside>Меню блога</aside>
      <article>{children}</article>
    </section>
  );
}

Все страницы внутри /blog будут обёрнуты этим layout-ом.

Где хранить стили и ассеты?

  • Стили: Обычно в папке styles/ или прямо в app/globals.css. Подключать их можно в layout-ах.
  • Картинки и статические файлы: В папке public/. Всё, что лежит в public/, доступно по корню сайта (например, /logo.png).

6. Как выглядит реальный проект?

Давайте соберём всё вместе — простой, но реальный пример структуры: 


my-next-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   ├── about/
│   │   └── page.tsx
│   ├── blog/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── [slug]/
│   │       └── page.tsx
│   └── api/
│       └── hello/
│           └── route.ts
├── public/
│   └── logo.png
├── styles/
│   └── globals.css
├── package.json
└── next.config.js
  • Главная страница — app/page.tsx (/)
  • Страница "О нас" — app/about/page.tsx (/about)
  • Блог — app/blog/page.tsx (/blog)
  • Конкретная статья — app/blog/[slug]/page.tsx (/blog/hello-world)
  • API-эндпоинт — app/api/hello/route.ts (/api/hello)

7. Типичные ошибки при работе с папкой app/

Ошибка №1: Нет файла layout.tsx в корне app/.
Без этого файла Next.js не сможет собрать структуру приложения — обязательно добавьте хотя бы минимальный layout.

Ошибка №2: Не тот уровень вложенности для страниц.
Если вы положите page.tsx не в ту папку, маршрут будет не тот, что вы ожидали. Следите за структурой!

Ошибка №3: Путают page.tsx и layout.tsx.
page.tsx — это страница (то, что видно по конкретному адресу).
layout.tsx — это "рамка", в которую вставляются страницы и другие layout-ы.

Ошибка №4: Используют старую папку pages/ вместе с app/.
В одном проекте можно использовать только одну из систем маршрутизации — не мешайте их.

Ошибка №5: Не подключают стили в layout-е, а пытаются в отдельных страницах.
Глобальные стили лучше подключать в layout, чтобы не было неожиданных багов.

Комментарии
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ