Frontend Architecture (Next.js TypeScript) markdown Copy Edit

Frontend Architecture — Next.js + TypeScript

1. Стек технологий

• Next.js — фреймворк для React с серверным рендерингом и маршрутизацией.
• TypeScript — строгая типизация для уменьшения ошибок.
• React Query — работа с данными с сервера (кэширование, синхронизация).
• Zustand — глобальное управление состоянием без лишней сложности.
• Tailwind CSS — быстрая и удобная стилизация.

2. Структура проекта

src/ pages/ # Маршруты Next.js components/ # Повторно используемые UI-компоненты features/ # Логика конкретных функций (модули) hooks/ # Кастомные React-хуки store/ # Zustand store (глобальное состояние) services/ # Запросы к API (React Query) styles/ # Глобальные стили types/ # Общие TypeScript типы

3. Поток данных

1. Пользователь открывает страницу → Next.js отрисовывает её (SSR или SSG).
2. Компоненты делают запросы к API через React Query.
3. Ответы кэшируются и синхронизируются.
4. Глобальное состояние хранится в Zustand, локальное — в useState.
5. Стилизация через Tailwind CSS.

4. Принципы

• Separation of Concerns — каждый модуль отвечает за своё.
• Reusable Components — переиспользуемые UI-элементы.
• Type Safety — всё типизировано.

3. Поток данных

1. Пользователь открывает страницу → Next.js отрисовывает её (SSR или SSG).
2. Компоненты делают запросы к API через React Query.
3. Ответы кэшируются и синхронизируются.
4. Глобальное состояние хранится в Zustand, локальное — в useState.
5. Стилизация через Tailwind CSS.

4. Принципы

• Separation of Concerns — каждый модуль отвечает за своё.
• Reusable Components — переиспользуемые UI-элементы.
• Type Safety — всё типизировано.