S.Gromov
1195c7b75d
- Подзаголовки архитектуры подняты до самодостаточных: Слои SLM, Модули SLM, Сегменты SLM - Подзаголовки REST-клиентов подняты до самодостаточных: Автогенерация REST-клиента, Ручное создание REST-клиента - Для серверных/клиентских компонентов h1 оставлен коротким, контекст полностью переносится в описание - Лендинг docs/docs/index.md актуализирован под новые имена; «Создание проекта» и «Данные» вынесены в отдельные группы - В CONTRIBUTING описана отдельная группа разделов «Настройка» и весь набор типов: basics, creating-project, setup, usage - Зафиксирован принцип: подъём контекста в h1 — только грамматически естественный, иначе контекст переносится в описание - Frontmatter дополнен обязательным полем description - Удалены устаревшие OLD_parts/ и notes
95 lines
5.9 KiB
Markdown
95 lines
5.9 KiB
Markdown
# NextJS Style Guide
|
||
|
||
Стандарты разработки фронтенд-приложений на Next.js и TypeScript.
|
||
|
||
Сайт: https://nextjs-style-guide.gromlab.ru
|
||
|
||
## Использование
|
||
|
||
**Для AI-агентов:**
|
||
|
||
- [llms.txt](https://nextjs-style-guide.gromlab.ru/llms.txt) — Карта разделов, оглавление со ссылками на разделы.
|
||
- [llms-full.txt](https://nextjs-style-guide.gromlab.ru/llms-full.txt) — Вся документация одним файлом.
|
||
|
||
**Для проекта:**
|
||
|
||
- [nextjs-style-guide.zip](https://nextjs-style-guide.gromlab.ru/nextjs-style-guide.zip) — Набор Markdown-файлов для распаковки в `./ai/nextjs-style-guide/` или другую папку проекта.
|
||
|
||
## Структура документации
|
||
|
||
### Подсказки
|
||
|
||
[Подсказки](docs/docs/workflow.md) — короткие ответы на типовые вопросы и решения для спорных ситуаций.
|
||
|
||
### Базовые правила
|
||
|
||
**Каким должен быть код** — стандарты, не привязанные к конкретной технологии.
|
||
|
||
| Раздел | Отвечает на вопрос |
|
||
|--------|-------------------|
|
||
| Технологии и библиотеки | Какой стек используем? |
|
||
| Именование | Как называть файлы, переменные, компоненты, хуки? |
|
||
| SLM Design | Что такое SLM и зачем она нужна? |
|
||
| Архитектура: Слои | Какие слои есть и как между ними устроены зависимости? |
|
||
| Архитектура: Модули | Что такое модуль и как он устроен? |
|
||
| Архитектура: Сегменты | Какие сегменты есть внутри модуля? |
|
||
| Стиль кода | Как оформлять код: отступы, кавычки, импорты, early return? |
|
||
| Документирование | Как писать JSDoc: что документировать, а что нет? |
|
||
| Типизация | Как типизировать: type vs interface, any/unknown? |
|
||
|
||
### Создание проекта
|
||
|
||
**Как начать новый проект** — варианты установки и эталонный набор инструментов.
|
||
|
||
| Раздел | Отвечает на вопрос |
|
||
|--------|-------------------|
|
||
| Создание проекта из шаблона | Как начать проект из готового шаблона? |
|
||
| Создание проекта вручную | Как поднять проект с нуля без шаблона? |
|
||
| Чистая установка Next.js | Как поставить голый Next.js под дальнейшую сборку? |
|
||
|
||
### Настройка
|
||
|
||
**Как сконфигурировать проект** — пошаговая настройка инструментов и инфраструктуры.
|
||
|
||
| Раздел | Отвечает на вопрос |
|
||
|--------|-------------------|
|
||
| Алиасы импортов | Как настроить алиасы импортов? |
|
||
| Biome | Как настроить линтер и форматтер? |
|
||
| PostCSS | Какие плагины PostCSS нужны и как их настроить? |
|
||
| Стили | Как подключить базовые стили и токены? |
|
||
| SVG-спрайты | Как подключить генерацию SVG-спрайтов? |
|
||
| Шаблоны генерации | Как подключить шаблоны для кодогенерации? |
|
||
| VS Code | Как настроить редактор для проекта? |
|
||
|
||
### Использование
|
||
|
||
**Как это устроено и как этим пользоваться** — структура, примеры и правила для конкретных областей.
|
||
|
||
| Раздел | Отвечает на вопрос |
|
||
|--------|-------------------|
|
||
| Структура проекта | Как организованы папки и файлы по SLM? |
|
||
| Компоненты | Как устроен компонент: файлы, пропсы, clsx? |
|
||
| Файлы роутинга | Как описывать layout, page, loading, error, not-found? |
|
||
| Шаблоны и генерация кода | Как работают шаблоны, синтаксис и инструменты генерации? |
|
||
| Стили | Как писать CSS: вложенность, медиа, токены? |
|
||
| SVG-спрайты | Как использовать SVG-спрайты в коде? |
|
||
| Изображения | _(не заполнен)_ |
|
||
| Видео | _(не заполнен)_ |
|
||
| Stores | _(не заполнен)_ |
|
||
| Хуки | _(не заполнен)_ |
|
||
| Шрифты | _(не заполнен)_ |
|
||
| Локализация | _(не заполнен)_ |
|
||
|
||
### Данные
|
||
|
||
**Как работать с источниками данных** — REST, realtime и потребление в компонентах.
|
||
|
||
| Раздел | Отвечает на вопрос |
|
||
|--------|-------------------|
|
||
| Источники данных | Как устроена работа с данными в проекте? |
|
||
| REST: Автоматическая генерация | Как сгенерировать REST-клиент автоматически из OpenAPI? |
|
||
| REST: Ручное создание | Как написать REST-клиент вручную? |
|
||
| REST: Серверные компоненты | Как получать данные в серверных компонентах? |
|
||
| REST: Клиентские компоненты | Как получать данные в клиентских компонентах? |
|
||
| Realtime | Как работать с realtime-каналами и сокетами? |
|