118 lines
5.8 KiB
Markdown
118 lines
5.8 KiB
Markdown
## О проекте
|
||
|
||
Это проект на **Next.js** (App Router), использующий UI-компоненты **shadcn/ui**, утилитарную CSS-библиотеку **Tailwind CSS** и библиотеку анимаций **framer-motion**.
|
||
|
||
## Стек и роль технологий
|
||
|
||
- **Next.js**: фреймворк для React с рендерингом на сервере, маршрутизацией и API-роутами.
|
||
- Документация: [nextjs.org/docs](https://nextjs.org/docs)
|
||
- **shadcn/ui**: коллекция доступных и настраиваемых компонентов на базе Radix UI и Tailwind.
|
||
- Документация: [ui.shadcn.com](https://ui.shadcn.com/)
|
||
- **Tailwind CSS**: утилитарные классы для быстрой стилизации интерфейсов.
|
||
- Документация: [tailwindcss.com/docs](https://tailwindcss.com/docs)
|
||
- **framer-motion**: мощная библиотека для анимаций в React-компонентах.
|
||
- Документация: [www.framer.com/motion](https://www.framer.com/motion)
|
||
|
||
## Быстрый старт
|
||
|
||
1. Установите зависимости:
|
||
```bash
|
||
pnpm install
|
||
```
|
||
2. Запустите дев-сервер:
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
3. Откройте `http://localhost:3000` в браузере.
|
||
|
||
## Структура проекта (основное)
|
||
|
||
- `src/app/(frontend)`: публичные страницы, глобальные стили (`globals.css`), макеты и корневые компоненты фронтенда.
|
||
- `src/shared/ui`: библиотека переиспользуемых UI-компонентов на базе shadcn/ui.
|
||
- `src/shared/lib`: утилиты и вспомогательные функции.
|
||
|
||
## Архитектура: Feature‑Sliced Design (FSD)
|
||
|
||
Проект следует принципам **Feature‑Sliced Design** для масштабируемой фронтенд-архитектуры. Подробнее: [feature-sliced.design/docs](https://feature-sliced.design/docs).
|
||
|
||
- **app**: инициализация приложения, провайдеры, глобальные стили и макеты (в проекте — `src/app`, в т.ч. `src/app/(frontend)`).
|
||
- **processes**: долгоживущие бизнес-процессы (слой появится при необходимости).
|
||
- **pages**: страницы и маршруты. В Next.js App Router это структурируется через `src/app` и сегменты маршрутов.
|
||
- **widgets**: составные блоки из нескольких features/entities (см. `src/widgets`).
|
||
- **features**: пользовательские сценарии и их логика/компоненты (см. `src/features`).
|
||
- **entities**: бизнес-сущности и их представления/модели (см. `src/entities`).
|
||
- **shared**: переиспользуемые модули, UI, утилиты, конфиги (см. `src/shared`).
|
||
|
||
Рекомендации:
|
||
|
||
- Импорты направлены сверху вниз: `shared → entities → shared → widgets → features → pages/app`.
|
||
- Публичный API каждого слайса/модуля экспортируется через `index`-файлы.
|
||
- Избегайте циклических зависимостей между слоями.
|
||
|
||
## Соглашения по наименованию
|
||
|
||
- Имена файлов компонентов: `kebab-case`.
|
||
- Примеры: `date-picker.tsx`, `user-card.tsx`, `navigation-menu.tsx`.
|
||
- Имена React-компонентов (идентификаторы): `PascalCase`.
|
||
- Примеры: `DatePicker`, `UserCard`, `NavigationMenu`.
|
||
|
||
## UI на базе shadcn/ui
|
||
|
||
Компоненты интерфейса собраны и переиспользуются в каталоге `src/shared/ui`. Они основаны на Tailwind и Radix UI, легко настраиваются через классы и токены дизайна. Рекомендуется ориентироваться на официальные примеры и паттерны из документации:
|
||
|
||
- Руководство и примеры: [ui.shadcn.com](https://ui.shadcn.com/)
|
||
|
||
## Стилизация: Tailwind CSS
|
||
|
||
Проект использует Tailwind для быстрой и согласованной стилизации. Ключевые ресурсы:
|
||
|
||
- Документация: [tailwindcss.com/docs](https://tailwindcss.com/docs)
|
||
- Руководства по best practices: [tailwindcss.com/blog](https://tailwindcss.com/blog)
|
||
|
||
## Анимации: framer-motion
|
||
|
||
Для анимаций используется `framer-motion`. Это мощная библиотека для создания плавных и производительных анимаций в React-компонентах.
|
||
|
||
Пример использования:
|
||
|
||
```tsx
|
||
import { motion } from 'framer-motion';
|
||
|
||
function AnimatedComponent() {
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
Анимированный контент
|
||
</motion.div>
|
||
);
|
||
}
|
||
```
|
||
|
||
Документация: [www.framer.com/motion](https://www.framer.com/motion)
|
||
|
||
## Команды
|
||
|
||
```bash
|
||
# Запуск дев-сервера
|
||
pnpm dev
|
||
|
||
# Билд продакшн-версии
|
||
pnpm build
|
||
|
||
# Предпросмотр продакшн-сборки
|
||
pnpm start
|
||
|
||
# Линтинг
|
||
pnpm lint
|
||
```
|
||
|
||
## Полезные ссылки
|
||
|
||
- Next.js: [nextjs.org/docs](https://nextjs.org/docs)
|
||
- shadcn/ui: [ui.shadcn.com](https://ui.shadcn.com/)
|
||
- Tailwind CSS: [tailwindcss.com/docs](https://tailwindcss.com/docs)
|
||
- framer-motion: [www.framer.com/motion](https://www.framer.com/motion)
|