58 lines
3.6 KiB
Markdown
58 lines
3.6 KiB
Markdown
|
# NextJS Style Guide
|
|||
|
|
|
|||
|
|
Правила и стандарты разработки на NextJS и TypeScript: архитектура, типизация, стили, компоненты, API и инфраструктурные разделы.
|
|||
|
|
|
|||
|
|
## Для ассистентов
|
|||
|
|
|
|||
|
|
Полная документация в одном MD файле: https://gromlab.ru/docs/frontend-style-guide/raw/branch/main/generated/ru/RULES.md
|
|||
|
|
|
|||
|
|
## Структура документации
|
|||
|
|
|
|||
|
|
### Workflow
|
|||
|
|
|
|||
|
|
**Что делать** в конкретной ситуации — пошаговые инструкции.
|
|||
|
|
|
|||
|
|
| Раздел | Отвечает на вопрос |
|
|||
|
|
|--------|-------------------|
|
|||
|
|
| Начало работы | Какие инструменты установить перед началом разработки? |
|
|||
|
|
| Создание приложения | Как создать новый проект, откуда взять шаблон? |
|
|||
|
|
| Создание страниц | Как добавить страницу: роутинг и экран? |
|
|||
|
|
| Создание компонентов | Как генерировать компоненты через шаблоны? |
|
|||
|
|
| Стилизация | Чем стилизовать: Mantine, токены или PostCSS? |
|
|||
|
|
| Работа с данными | Как получать данные: SWR, кодген, сокеты? |
|
|||
|
|
| Управление состоянием | Когда и как создавать стор (Zustand)? |
|
|||
|
|
| Локализация | Как добавлять переводы и работать с i18next? |
|
|||
|
|
|
|||
|
|
### Базовые правила
|
|||
|
|
|
|||
|
|
**Каким должен быть код** — стандарты, не привязанные к конкретной технологии.
|
|||
|
|
|
|||
|
|
| Раздел | Отвечает на вопрос |
|
|||
|
|
|--------|-------------------|
|
|||
|
|
| Технологии и библиотеки | Какой стек используем? |
|
|||
|
|
| Архитектура | Как устроены слои FSD, зависимости, публичный API? |
|
|||
|
|
| Стиль кода | Как оформлять код: отступы, кавычки, импорты, early return? |
|
|||
|
|
| Именование | Как называть файлы, переменные, компоненты, хуки? |
|
|||
|
|
| Документирование | Как писать JSDoc: что документировать, а что нет? |
|
|||
|
|
| Типизация | Как типизировать: type vs interface, any/unknown, FC? |
|
|||
|
|
|
|||
|
|
### Прикладные разделы
|
|||
|
|
|
|||
|
|
**Как устроена конкретная область** — правила, структура и примеры кода для отдельных технологий и инструментов.
|
|||
|
|
|
|||
|
|
| Раздел | Отвечает на вопрос |
|
|||
|
|
|--------|-------------------|
|
|||
|
|
| Структура проекта | Как организованы папки и файлы по FSD? |
|
|||
|
|
| Компоненты | Как устроен компонент: файлы, пропсы, clsx, FC? |
|
|||
|
|
| Шаблоны и генерация | Как работают шаблоны: синтаксис, переменные, модификаторы? |
|
|||
|
|
| Стили | Как писать CSS: PostCSS Modules, вложенность, медиа, токены? |
|
|||
|
|
| Изображения | _(не заполнен)_ |
|
|||
|
|
| SVG-спрайты | _(не заполнен)_ |
|
|||
|
|
| Видео | _(не заполнен)_ |
|
|||
|
|
| API | _(не заполнен)_ |
|
|||
|
|
| Stores | _(не заполнен)_ |
|
|||
|
|
| Хуки | _(не заполнен)_ |
|
|||
|
|
| Шрифты | _(не заполнен)_ |
|
|||
|
|
| Локализация | _(не заполнен)_ |
|
|||
|
|
|