S.Gromov
7965ec2a96
- sidebar: «Данные» поднят сразу после «Страницы (App Router)» - sidebar: пустые разделы (Изображения, Видео, Stores, Хуки, Шрифты, Локализация) оставлены без link с пометкой «· в разработке» - index.md приведён к актуальной структуре sidebar (Workflow, Базовые правила, Установка и настройка, Использование) - README.md перегенерирован
81 lines
5.8 KiB
Markdown
81 lines
5.8 KiB
Markdown
# NextJS Style Guide
|
||
|
||
Соглашения по разработке Next.js проектов: архитектура и слои приложения, структура кода, организация модулей, стилизация, типизация и инфраструктура.
|
||
|
||
Сайт: 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/` или другую папку проекта.
|
||
|
||
## Структура документации
|
||
|
||
### Workflow
|
||
|
||
[Workflow](docs/docs/workflow.md) — пошаговая карта типовых задач: с чего начать, как добавить страницу/компонент, как подключить данные, стили, локализацию.
|
||
|
||
### Базовые правила
|
||
|
||
**Каким должен быть код** — стандарты, не привязанные к конкретной технологии.
|
||
|
||
| Раздел | Отвечает на вопрос |
|
||
|--------|-------------------|
|
||
| Технологии и библиотеки | Какой стек используем? |
|
||
| Именование | Как называть файлы, переменные, компоненты, хуки? |
|
||
| Архитектура: Обзор | Что такое SLM и зачем она нужна? |
|
||
| Архитектура: Слои | Какие слои есть и как между ними устроены зависимости? |
|
||
| Архитектура: Модули | Что такое модуль и как он устроен? |
|
||
| Архитектура: Сегменты | Какие сегменты есть внутри модуля? |
|
||
| Стиль кода | Как оформлять код: отступы, кавычки, импорты, early return? |
|
||
| Документирование | Как писать JSDoc: что документировать, а что нет? |
|
||
| Типизация | Как типизировать: type vs interface, any/unknown? |
|
||
|
||
### Установка и настройка
|
||
|
||
**Как поднять и сконфигурировать проект** — пошаговая настройка инструментов и инфраструктуры.
|
||
|
||
| Раздел | Отвечает на вопрос |
|
||
|--------|-------------------|
|
||
| Создание проекта: Из шаблона | Как начать проект из готового шаблона? |
|
||
| Создание проекта: Вручную | Как поднять проект с нуля без шаблона? |
|
||
| Next.js | Как настроить Next.js под проект? |
|
||
| Алиасы | Как настроить путевые алиасы импортов? |
|
||
| Biome | Как настроить Biome (линтер и форматер)? |
|
||
| Стили | Как подключить и настроить стили проекта? |
|
||
| PostCSS | Какие плагины PostCSS нужны и как их настроить? |
|
||
| SVG-спрайты | Как настроить генерацию SVG-спрайтов? |
|
||
| Шаблоны генерации | Как подключить шаблоны для кодогенерации? |
|
||
| VS Code | Как настроить редактор для проекта? |
|
||
|
||
### Использование
|
||
|
||
**Как это устроено и как этим пользоваться** — структура, примеры и правила для конкретных областей.
|
||
|
||
| Раздел | Отвечает на вопрос |
|
||
|--------|-------------------|
|
||
| Структура проекта | Как организованы папки и файлы по SLM? |
|
||
| Компоненты | Как устроен компонент: файлы, пропсы, clsx? |
|
||
| Страницы (App Router) | Как описывать layout, page, loading, error, not-found? |
|
||
| Данные: Введение | Как устроена работа с данными в проекте? |
|
||
| Данные: REST: Клиенты: Автоматическая генерация | Как сгенерировать REST-клиент автоматически из OpenAPI? |
|
||
| Данные: REST: Клиенты: Ручная генерация | Как написать REST-клиент вручную? |
|
||
| Данные: REST: Получение данных: Серверные компоненты | Как получать данные в серверных компонентах? |
|
||
| Данные: REST: Получение данных: Клиентские компоненты | Как получать данные в клиентских компонентах (SWR)? |
|
||
| Данные: Realtime | Как работать с realtime-каналами и сокетами? |
|
||
| Шаблоны и генерация кода | Как работают шаблоны, синтаксис и инструменты генерации? |
|
||
| Стили | Как писать CSS: PostCSS Modules, вложенность, медиа, токены? |
|
||
| Изображения | _(не заполнен)_ |
|
||
| SVG-спрайты | Как использовать SVG-спрайты в коде? |
|
||
| Видео | _(не заполнен)_ |
|
||
| Stores | _(не заполнен)_ |
|
||
| Хуки | _(не заполнен)_ |
|
||
| Шрифты | _(не заполнен)_ |
|
||
| Локализация | _(не заполнен)_ |
|