# NextJS Style Guide Правила и стандарты разработки на NextJS и TypeScript: архитектура, типизация, стили, компоненты, API и инфраструктурные разделы. ## Для ассистентов Полная документация в одном MD файле: https://gromlab.ru/docs/nextjs-style-guide/raw/branch/main/generated/ru/RULES.md ## Структура документации ### Workflow **Что делать и в каком порядке** — пошаговые инструкции. | Раздел | Отвечает на вопрос | |--------|-------------------| | Начало работы | Что нужно знать перед началом разработки? | | Создание проекта | Как начать новый проект? | | Генерация кода | Какие модули должны генерироваться из шаблонов? | | Добавление страницы | Как добавить новую страницу в проект? | | Добавление UI-модуля | Как создать компонент, фичу, виджет, сущность или layout? | | Стилизация | Как стилизовать компоненты в проекте? | | Получение данных | Как получать данные с сервера? | | Управление состоянием | Как работать с состоянием? | | Локализация | Как добавлять переводы и подключать локализацию? | ### Базовые правила **Каким должен быть код** — стандарты, не привязанные к конкретной технологии. | Раздел | Отвечает на вопрос | |--------|-------------------| | Технологии и библиотеки | Какой стек используем? | | Архитектура | Как устроены слои FSD, зависимости, публичный API? | | Стиль кода | Как оформлять код: отступы, кавычки, импорты, early return? | | Именование | Как называть файлы, переменные, компоненты, хуки? | | Документирование | Как писать JSDoc: что документировать, а что нет? | | Типизация | Как типизировать: type vs interface, any/unknown, FC? | ### Прикладные разделы **Как это настроить и использовать** — конфигурация, структура и примеры кода для конкретных областей. | Раздел | Отвечает на вопрос | |--------|-------------------| | Настройка VS Code | Как настроить редактор для проекта? | | Структура проекта | Как организованы папки и файлы по FSD? | | Компоненты | Как устроен компонент: файлы, пропсы, clsx, FC? | | Page-level компоненты | Как описывать layout, page, loading, error, not-found? | | Шаблоны и генерация кода | Как работают шаблоны, синтаксис и инструменты генерации? | | Стили | Как писать CSS: PostCSS Modules, вложенность, медиа, токены? | | Изображения | _(не заполнен)_ | | SVG-спрайты | _(не заполнен)_ | | Видео | _(не заполнен)_ | | API | _(не заполнен)_ | | Stores | _(не заполнен)_ | | Хуки | _(не заполнен)_ | | Шрифты | _(не заполнен)_ | | Локализация | _(не заполнен)_ |