Frontend Architecture (Next.js TypeScript) markdown Copy Edit

Jump to bottom

Andrew Yurik edited this page Aug 12, 2025 · 3 revisions

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. Поток данных

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

4. Принципы

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