# NextJS Style Guide

> Стандарты разработки frontend-приложений на Next.js (App Router) + TypeScript + React с архитектурой SLM (Scoped Layered Module Design — модульная архитектура со слоями ответственности, где каждый модуль содержит всё необходимое: компоненты, хуки, сторы, типы, стили).

Стек: React, TypeScript, Next.js App Router, Mantine UI, SWR, Zustand, i18next, PostCSS Modules, Vitest, clsx.

Документация покрывает архитектуру SLM (слои, модули, сегменты, направление зависимостей, публичный API), правила оформления кода (именование, форматирование, импорты, типизация, JSDoc), реализацию компонентов и хуков, работу с App Router, кодогенерацию из шаблонов, стилизацию (Mobile First, токены), работу с API и сокетами, управление состоянием через Zustand, локализацию, ассеты (шрифты, изображения, SVG-спрайты) и настройку VS Code.

## Главная

- [Главная](/docs/index.md): Соглашения по разработке Next.js проектов: архитектура и слои приложения, структура кода, организация модулей, стилизация, типизация и инфраструктура.

## Workflow

- [Workflow](/docs/workflow.md): Порядок действий при разработке — от создания проекта до реализации фич.

## Базовые правила

- [Технологии и библиотеки](/docs/basics/tech-stack.md): Базовый стек проекта по областям: UI, архитектура, данные, состояние, локализация, тестирование, стили, генерация кода.
- [Именование](/docs/basics/naming.md): Соглашения об именовании в коде: что и как называть.
- [Архитектура: Обзор](/docs/basics/architecture/index.md): Scoped Layered Module Design — модульная архитектура фронтенд-приложений. Код организован по слоям ответственности, а модуль содержит всё, что ему нужно: компоненты, хуки, сторы, типы, стили.
- [Архитектура: Слои](/docs/basics/architecture/reference/layers.md): Слои SLM: назначение, классификация, направление зависимостей, правила.
- [Архитектура: Модули](/docs/basics/architecture/reference/modules.md): Модули SLM: состав, границы, взаимодействие с остальным кодом.
- [Архитектура: Сегменты](/docs/basics/architecture/reference/segments.md): Сегменты SLM: типы, назначение, что лежит внутри каждого.
- [Стиль кода](/docs/basics/code-style.md): Единые правила оформления кода: форматирование, импорты, читаемость.
- [Документирование](/docs/basics/documentation.md): Правила документирования кода: что и когда документировать через JSDoc.
- [Типизация](/docs/basics/typing.md): Правила типизации в TypeScript: общие принципы и работа с динамическими типами.

## Прикладные разделы

- [Структура проекта](/docs/applied/project-structure.md): Файловая организация Next.js-проекта по архитектуре SLM.
- [Компоненты](/docs/applied/components.md): Правила написания React-компонентов: файловая структура модуля, типизация пропсов, документирование и реализация. Раздел охватывает компоненты всех слоёв — от `shared/ui` до `screens`.
- [Страницы (App Router)](/docs/applied/page-level.md): Правила для специальных файлов App Router (`page.tsx`, `layout.tsx`, `error.tsx`, `not-found.tsx` и др.) — чем наш подход отличается от дефолтного.
- [Шаблоны и генерация кода](/docs/applied/templates-generation.md): Как работают шаблоны, как их создавать, синтаксис переменных и как генерировать код с помощью расширения VS Code и CLI.
- [Стили](/docs/applied/styles.md): Правила написания CSS: PostCSS Modules, форматирование, переменные.
- [Изображения](/docs/applied/images-sprites.md)
- [SVG-спрайты](/docs/applied/svg-sprites.md)
- [Видео](/docs/applied/video.md)
- [API](/docs/applied/api.md)
- [Stores](/docs/applied/stores.md)
- [Хуки](/docs/applied/hooks.md)
- [Шрифты](/docs/applied/fonts.md)
- [Локализация](/docs/applied/localization.md)
- [Настройка VS Code](/docs/applied/vscode.md): Каждый проект содержит папку `.vscode/` с конфигурацией редактора. Это гарантирует, что все участники команды работают с одинаковыми настройками форматирования, линтинга и расширениями.