nextjs-fetch-data-example/ai/nextjs-style-guide/applied/module.md

---
title: Модуль
description: Как должен выглядеть сгенерированный SLM-модуль в проекте.
---

# Модуль

Как должен выглядеть сгенерированный SLM-модуль в проекте.

## Назначение

Архитектурное определение модуля описано в разделе [Архитектура → Модули](../basics/architecture/modules.md). Список сегментов описан в разделе [Архитектура → Сегменты](../basics/architecture/segments.md).

Эта страница показывает прикладное оформление трёх типов модулей: UI, бизнес и инфраструктурный.

## Создание

1. Проверьте, что в проекте есть нужный шаблон в `.templates/`.
2. Если шаблона нет — создайте его по разделу [Создание шаблонов](./templates/templates-create.md).
3. Сгенерируйте модуль через [VS Code или CLI](./templates/templates-usage.md).

## Типы модулей

Архитектура определяет три типа модулей ([Типы модулей](../basics/architecture/modules.md#типы-модулей)):

| Тип | Обязательный файл | Описание |
|---|---|---|
| UI-модуль | `{name}.tsx` | Модуль, выросший из компонента |
| Бизнес-модуль | `{name}.factory.ts` | Модуль вокруг публичного runtime API |
| Инфраструктурный модуль | нет | Модуль вокруг технического сервиса |

## UI-модуль

UI-модуль — это компонент, который перерос ограничения компонента: получил собственные хуки, вложенные модули в `parts/`, сценарную логику или публичный API. Внутренняя структура та же, что у компонента: корневой `.tsx`, типы, стили, `ui/`. Но без ограничений компонента.

Подробное оформление компонентов внутри `ui/` описано в разделе [Компонент](./component.md).

## Бизнес-модуль

Бизнес-модуль строится вокруг публичного runtime API. Ключевой файл — фабрика (`{name}.factory.ts`), которая возвращает всё, что нужно внешнему коду в runtime.

Архитектурное описание фабрики: [Архитектура → Фабрика](../basics/architecture/modules.md#фабрика).

### Структура

```text
business/customer/
├── customer.factory.ts
├── index.ts
└── types/
    ├── customer.type.ts
    ├── customer-api.type.ts
    ├── customer-deps.type.ts
    └── customer-factory.type.ts
```

### Типы

`business/customer/types/customer-api.type.ts`

```ts
export type CustomerApi = {
  useCustomer: () => Customer
  CustomerCard: (props: CustomerCardProps) => ReactNode
}
```

`business/order/types/order-deps.type.ts`

```ts
export type OrderDeps = {
  customer: Pick<CustomerApi, 'useCustomer'>
}
```

`business/order/types/order-factory.type.ts`

```ts
export type OrderFactory = (deps: OrderDeps) => OrderApi
```

### Фабрика без зависимостей

`business/customer/customer.factory.ts`

```ts
import type { CustomerFactory } from './types/customer-factory.type'

export const customerFactory: CustomerFactory = () => {
  return {
    useCustomer,
    CustomerCard,
  }
}
```

### Фабрика с зависимостями

`business/order/order.factory.ts`

```ts
import type { OrderFactory } from './types/order-factory.type'

export const orderFactory: OrderFactory = (deps) => {
  return {
    useOrder,
    OrderCard,
  }
}
```

### Композиция на уровне screen

```tsx
// screens/home/home.screen.tsx
import { customerFactory } from '@/business/customer'
import { orderFactory } from '@/business/order'

const customer = customerFactory()
const order = orderFactory({ customer })

const { useOrder, OrderCard } = order

export const HomeScreen = () => {
  const currentOrder = useOrder()

  return <OrderCard order={currentOrder} />
}
```

## Инфраструктурный модуль

Инфраструктурный модуль строится вокруг технического сервиса или интеграции. Его структура определяется природой сервиса — фиксированного корневого файла нет.

Архитектурное описание: [Архитектура → Типы модулей → Инфраструктурный модуль](../basics/architecture/modules.md#инфраструктурный-модуль).

Пример модуля темы:

```text
theme/
├── index.ts
├── config/
├── hooks/
├── styles/
└── ui/
```

Пример модуля API-клиента:

```text
backend-api/
├── backend-api.client.ts
├── config/
├── types/
└── index.ts
```