sync

parts/7-project-structure.md

@@ -8,29 +8,25 @@ title: Структура проекта
 
 ## Базовая структура проекта
 
-**Хорошо**
+Слои FSD не зависят от фреймворка. Различается только содержимое `app/` — в React SPA это конфигурация роутинга, в Next.js — системные файлы фреймворка (`layout.tsx`, `page.tsx`, route-сегменты).
+
 ```text
 src/
-├── app/                  # Инициализация приложения, роутинг, провайдеры
-│   ├── config/           # Конфигурации и константы уровня приложения
-│   ├── providers/        # Провайдеры и обёртки приложения
-│   ├── routing/          # Конфигурация маршрутов
-│   ├── styles/           # Глобальные стили, CSS-переменные, custom media
-│   └── index.ts          # Публичный API слоя
-├── screens/              # Экраны приложения
-│   └── profile/          # Экран профиля
+├── app/                  # Инициализация приложения (см. «Слой app/»)
+├── screens/              # UI-компоненты страниц
+│   └── profile/
 │       ├── profile.screen.tsx
 │       └── index.ts
 ├── layouts/              # Общие шаблоны и каркасы страниц
-│   └── main-layout/      # Основной layout
+│   └── main-layout/
 │       ├── main-layout.layout.tsx
 │       └── index.ts
 ├── widgets/              # Крупные блоки интерфейса
-│   └── header/           # Виджет шапки
+│   └── header/
 │       ├── header.widget.tsx
 │       └── index.ts
 ├── features/             # Пользовательские сценарии
-│   └── auth-by-email/    # Авторизация по email
+│   └── auth-by-email/
 │       ├── ui/
 │       │   └── login-form.ui.tsx
 │       ├── model/
@@ -38,7 +34,7 @@ src/
 │       ├── auth-by-email.feature.tsx
 │       └── index.ts
 ├── entities/             # Бизнес-сущности
-│   └── user/             # Сущность пользователя
+│   └── user/
 │       ├── model/
 │       │   └── user.store.ts
 │       ├── user.entity.tsx
@@ -54,12 +50,49 @@ src/
     │       └── index.ts
     ├── lib/              # Утилиты и хелперы
     ├── services/         # Общие сервисы и клиенты
-    ├── config/           # Общие конфигурации
+    ├── config/           # Общие конфигурации и константы
     └── assets/           # Ресурсы
-        ├── images/       # Изображения
-        ├── icons/        # Иконки
-        ├── fonts/        # Шрифты
-        └── video/        # Видео
+        ├── images/
+        ├── icons/
+        ├── fonts/
+        └── video/
+```
+
+## Слой app/
+
+Общее для обоих вариантов: провайдеры и глобальные стили. Различается только способ организации роутинга.
+
+### React SPA
+
+```text
+src/app/
+├── providers/            # Провайдеры и обёртки приложения
+├── routing/              # Конфигурация маршрутов (React Router)
+├── styles/               # Глобальные стили, CSS-переменные, custom media
+└── index.ts              # Entry point приложения
+```
+
+### Next.js (App Router)
+
+```text
+src/app/
+├── providers/            # Провайдеры и обёртки приложения
+├── styles/               # Глобальные стили, CSS-переменные, custom media
+├── layout.tsx            # Корневой layout (подключает providers, styles)
+├── page.tsx              # Главная страница
+└── profile/
+    └── page.tsx          # Рендерит ProfileScreen
+```
+
+В Next.js файлы `page.tsx` остаются тонкими — они только импортируют экран из `screens/` и рендерят его. Вся логика, зависимости и стили страницы живут в компоненте экрана, а не в `app/`.
+
+```tsx
+// src/app/profile/page.tsx
+import { ProfileScreen } from '@/screens/profile';
+
+export default function ProfilePage() {
+  return <ProfileScreen />;
+}
 ```
 
 **Плохо**