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

title, description

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

Модуль

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

Назначение

Архитектурное определение модуля описано в разделе Архитектура → Модули. Список сегментов описан в разделе Архитектура → Сегменты.

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

Создание

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

Типы модулей

Архитектура определяет три типа модулей (Типы модулей):

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

UI-модуль

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

Подробное оформление компонентов внутри ui/ описано в разделе Компонент.

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

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

Архитектурное описание фабрики: Архитектура → Фабрика.

Структура

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

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

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

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

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

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

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

business/customer/customer.factory.ts

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

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

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

business/order/order.factory.ts

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

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

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

// 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} />
}

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

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

Архитектурное описание: Архитектура → Типы модулей → Инфраструктурный модуль.

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

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

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

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