# NextJS Style Guide > Практический стайлгайд для разработки frontend-приложений на Next.js и TypeScript ## Table of Contents ### Архитектура #### Спецификация SLM - [SLM Design](/slm-design/architecture.md): Назначение архитектуры, ключевые принципы и карта разделов документации - [Слои](/slm-design/architecture/layers.md): Иерархия слоёв от app до shared, правила зависимостей и зона ответственности каждого слоя - [Модули](/slm-design/architecture/modules.md): Структура модуля, типы (UI, бизнес, инфра), публичный API, отличие модуля от компонента - [Сегменты](/slm-design/architecture/segments.md): Сегменты внутри модуля (ui/, model/, lib/ и др.), назначение и правила размещения файлов - [Монорепозитории](/slm-design/architecture/monorepo.md): Правила применения SLM Design для frontend-проектов, находящихся в монорепозитории #### Примеры - [Создание фабрики](/slm-design/examples/react/factory.md): Пример создания фабрики business-модуля в React-проекте - [Композиция фабрик](/slm-design/examples/react/factory-composition.md): Пример композиции business-фабрик на уровне screen-модуля в React-проекте - [Композиция через Provider](/slm-design/examples/react/composition-provider.md): Пример композиции бизнес-фабрик screen-модуля через React Provider ### Базовые правила - [Технологии и библиотеки](/nextjs-style-guide/basics/tech-stack.md): Какие библиотеки и инструменты используются в проекте. - [Именование](/nextjs-style-guide/basics/naming.md): Как называть переменные, файлы и прочие сущности в коде. - [Стиль кода](/nextjs-style-guide/basics/code-style.md): Как оформляется код в проекте. - [Документирование](/nextjs-style-guide/basics/documentation.md): Что и как документировать в коде. - [Типизация](/nextjs-style-guide/basics/typing.md): Как типизируется код в проекте. ### Прикладные разделы - [Структура проекта](/nextjs-style-guide/applied/project-structure.md): Из чего состоит проект и где что лежит. - [Файлы роутинга](/nextjs-style-guide/applied/page-level.md): Как работать со страницами и другими файлами роутинга Next.js App Router. - [Компонент](/nextjs-style-guide/applied/component.md): Как должен выглядеть сгенерированный React-компонент внутри SLM-модуля. - [Модуль](/nextjs-style-guide/applied/module.md): Как должен выглядеть сгенерированный SLM-модуль в проекте. - [Изображения](/nextjs-style-guide/applied/images.md): Как подключать изображения через Next.js Image в проекте. - [Шрифты](/nextjs-style-guide/applied/fonts.md): Как подключать шрифты через Next.js Font в проекте. - [Алиасы импортов](/nextjs-style-guide/applied/aliases.md): Какие алиасы импортов есть в проекте и как ими пользоваться. - [Biome](/nextjs-style-guide/applied/biome.md): Установка и настройка линтера-форматтера в новом проекте. - [PostCSS](/nextjs-style-guide/applied/postcss.md): Установка и настройка CSS-процессора в новом проекте. - [VS Code](/nextjs-style-guide/applied/vscode.md): Единые настройки редактора и расширений для команды. - [Локализация](/nextjs-style-guide/applied/localization.md): Как организовать локализацию как infra-модуль. - [Untitled](/nextjs-style-guide/applied/stores.md) #### Создание проекта - [Создание проекта из шаблона](/applied/creating-project/from-template.md): Создание нового проекта на основе готового шаблона. - [Создание проекта вручную](/applied/creating-project/manual.md): Поэтапное создание нового проекта без использования шаблона. - [Чистая установка Next.js](/applied/creating-project/nextjs.md): Установка Next.js без лишнего шаблона — голый каркас под дальнейшую сборку. #### REST-клиент - [REST-клиент](/applied/rest-client.md): Настройка REST-клиента сервиса для работы с внешним API. - [Использование REST-клиента](/applied/rest-client/usage.md): Как вызвать готовый REST-клиент в функции. ##### Настройка - [Настройка REST-клиента](/applied/rest-client/setup.md): Подготовка REST-клиента сервиса к использованию. - [Автогенерация REST-клиента](/applied/rest-client/setup/auto.md): Генерация REST-клиента из OpenAPI-спецификации. - [Ручное создание REST-клиента](/applied/rest-client/setup/manual.md): Создание REST-клиента вручную, когда OpenAPI нет или он неполный. - [GET-хуки REST-клиента](/applied/rest-client/setup/hooks.md): Прозрачные SWR-обёртки над GET-методами REST-клиента. #### Получение данных - [Получение данных](/applied/data-fetch.md): Как получать данные с учётом рендера страницы. - [Серверный await](/applied/data-fetch/server-await.md): Получение REST-данных на сервере до первого HTML. - [Параллельные серверные запросы](/applied/data-fetch/parallel-server-requests.md): Как запускать независимые REST-запросы на сервере без waterfall. - [Передача промиса ниже](/applied/data-fetch/pass-promise-down.md): Как запускать серверный REST-запрос выше и ожидать его во вложенном server-компоненте. - [Начальные данные для клиентских хуков](/applied/data-fetch/client-hooks-initial-data.md): Как дать клиентским GET-хукам начальные REST-данные. - [Клиентский GET-хук](/applied/data-fetch/client-get-hook.md): Получение REST-данных в Client Components через готовые GET-хуки REST-клиента. - [Business-композиция](/applied/data-fetch/business-composition.md): Когда REST-данные нужно объединить или интерпретировать в бизнес-модуле. #### Стили - [Настройка стилей](/applied/styles/styles-setup.md): Подготовка стилевой основы проекта: токены, медиа-запросы, глобальные стили. - [Использование стилей](/applied/styles/styles-usage.md): Как пишутся стили в проекте. #### SVG-спрайты - [SVG-спрайты](/applied/svg-sprites/svg-sprites-intro.md): Что такое SVG-спрайты и какие проблемы они решают. - [Настройка SVG-спрайтов](/applied/svg-sprites/svg-sprites-setup.md): Подключение SVG-спрайтов в новом проекте. - [Использование SVG-спрайтов](/applied/svg-sprites/svg-sprites-usage.md): Как добавлять и использовать SVG-иконки в коде. #### Шаблоны генерации - [Шаблоны генерации](/applied/templates/templates-intro.md): Что такое шаблоны кодогенерации и какие проблемы они решают. - [Настройка шаблонов генерации](/applied/templates/templates-setup.md): Первичная установка шаблонов кодогенерации в проект. - [Создание шаблонов генерации](/applied/templates/templates-create.md): Структура шаблонов, синтаксис переменных и примеры. - [Использование шаблонов генерации](/applied/templates/templates-usage.md): Генерация файлов из шаблонов через VS Code плагин и CLI. ### Other - [Подсказки](/nextjs-style-guide/workflow.md): Короткие ответы на типовые вопросы и решения для спорных ситуаций.