Структура проекта: app/ и public/

Знакомимся с папками и файлами, которые создал генератор, чтобы понимать, куда что класть.

В App Router папка app/ — это и есть маршруты приложения: каждый подкаталог становится сегментом URL, а специальные файлы вроде page.js и layout.js определяют, что рендерится.

Карта проекта

Типичная структура свежего проекта на App Router:

my-app/
├─ app/
│  ├─ layout.tsx      ← общий каркас (html, body) для всех страниц
│  ├─ page.tsx        ← страница для маршрута "/"
│  ├─ globals.css     ← глобальные стили
│  └─ favicon.ico
├─ public/            ← статика: картинки, шрифты, robots.txt
├─ next.config.js     ← конфигурация Next.js
├─ package.json
├─ tsconfig.json      ← если выбран TypeScript
└─ .next/             ← результат сборки (не коммитим)

Папка app/

Здесь живёт всё приложение. Несколько специальных имён файлов имеют для Next.js особый смысл:

Остальные файлы (компоненты, утилиты) можно класть рядом — маршрутами они не станут, пока не названы page.

Папка public/

Сюда кладут статические файлы, которые отдаются «как есть» по корню сайта. Файл public/logo.png будет доступен по адресу /logo.png:

export default function Header() {
  return <img src="/logo.png" alt="Логотип" width={120} height={40} />;
}

Обратите внимание: путь начинается со слэша и не содержит слова public — корень сайта и есть эта папка.

Файл next.config.js

Настройки фреймворка: разрешённые домены картинок, редиректы, переменные. На старте он почти пустой:

{
  "reactStrictMode": true,
  "images": {
    "remotePatterns": []
  }
}

(в реальном проекте это JS-файл, экспортирующий объект; здесь показана только форма настроек).

Итог

• app/ — маршруты; имя page.tsx делает сегмент видимой страницей.
• public/ — статика, доступная от корня сайта без префикса public.
• Специальные файлы (layout, loading, error) управляют поведением сегмента.