DosAi/NextNodeTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Next.js + Node.js template

Browse Source
This commit is contained in:
DosAi 2025-11-02 16:37:55 +03:00
commit 4790609e92
24 changed files with 1188 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
.cursorrules Normal file
View File

@ -0,0 +1,105 @@
# Правила разработки проекта
## Общая информация
Это шаблон проекта для быстрого старта с Next.js фронтендом и Express.js бэкендом.
### Архитектура
Проект состоит из двух частей:
- **Frontend**: Next.js приложение с App Router
- **Backend**: Express.js сервер
### Ключевые компоненты
- **Frontend**: Next.js 15 с TypeScript и Tailwind CSS
- **Backend**: Express.js сервер
- **Статический экспорт**: Frontend собирается в статические файлы
### Технологический стек
**Frontend:**
- Next.js 15.3.3 (App Router)
- React 19
- TypeScript 5
- Tailwind CSS 4
- ESLint
**Backend:**
- Express.js 5
- TypeScript (опционально)
### Важные правила кодирования
1. **Всегда используй TypeScript типы** - не используй `any`, используй строгую типизацию
2. **Модульность** - структурируй код по модулям
3. **Обработка ошибок** - все API запросы должны обрабатывать ошибки
4. **ESLint** - код должен проходить линтер без ошибок (особенно важно для production build)
### Структура проекта
```
frontend/
app/ # Next.js App Router страницы
components/ # React компоненты
lib/ # Утилиты и типы
docs/ # Документация
backend/
server.js # Основной файл сервера
routes/ # API маршруты (создавать по мере необходимости)
docs/ # Документация проекта
```
### API Endpoints
**Backend:**
- Настраиваются в `backend/server.js`
- Рекомендуется создавать отдельные файлы в `backend/routes/`
**Frontend:**
- API URL определяется автоматически: localhost для разработки, продакшн для деплоя
### Деплой
Проект деплоится на сервер через:
1. `git pull` на сервере
2. `npm run build` в папке frontend
3. `pm2 restart` для перезапуска процессов
### Файлы и пути
- Документация: `docs/` (корень проекта)
- Компоненты: `frontend/components/`
- Утилиты: `frontend/lib/`
- Бэкенд: `backend/server.js`
### Git Workflow
**Стандартный процесс разработки:**
1. Все изменения разрабатываются в ветке `dev`
2. Тестирование на сервере происходит из `dev`
3. После проверки `dev` мержится в `main`
4. Используй `--no-ff` при слиянии для сохранения истории
**Перед слиянием в main обязательно:**
- Протестировать на сервере
- Проверить линтер и сборку
- Убедиться что всё работает
Подробнее: `docs/PROJECT_RULES.md`
### Окружение разработки
**Платформы:**
- Разработка: Windows + PowerShell
- Хостинг: Ubuntu Linux
**Важно для разработки:**
- В PowerShell используй `;` вместо `&&` для цепочки команд
- Пути в Git всегда с `/`, даже на Windows
- При работе через SSH используй Linux команды
Подробнее: `docs/PROJECT_RULES.md` и `docs/KNOWLEDGE_BASE.md`

49
.gitignore vendored Normal file
View File

@ -0,0 +1,49 @@
# Dependencies
node_modules/
/.pnp
.pnp.js
# Testing
/coverage
# Next.js
/.next/
/out/
next-env.d.ts
*.tsbuildinfo
# Production
/build
/dist
# Misc
.DS_Store
*.pem
# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Local env files
.env*.local
.env
# Vercel
.vercel
# TypeScript
*.tsbuildinfo
next-env.d.ts
# IDE
.vscode/
.idea/
*.swp
*.swo
*~
# OS
Thumbs.db
.DS_Store

146
README.md Normal file
View File

@ -0,0 +1,146 @@
# Next.js + Node.js Backend Template
Готовый шаблон для быстрого старта проектов с Next.js фронтендом и Express.js бэкендом.
## 🚀 Возможности
- **Next.js 15** с App Router (статический экспорт)
- **Express.js** бэкенд
- **TypeScript** полная поддержка
- **Tailwind CSS 4** для стилизации
- **ESLint** настроенный
- **Модульная архитектура** готовая к расширению
- **Документация** и правила разработки
## 📁 Структура проекта
```
NextNodeTemplate/
├── frontend/ # Next.js приложение
│ ├── app/ # App Router страницы
│ ├── components/ # React компоненты
│ ├── lib/ # Утилиты и типы
│ └── docs/ # Документация фронтенда
├── backend/ # Express.js сервер
│ └── server.js # Основной файл сервера
├── docs/ # Документация проекта
│ ├── PROJECT_RULES.md # Правила разработки
│ ├── KNOWLEDGE_BASE.md # База знаний
│ └── CHANGELOG.md # История изменений
├── .cursorrules # Правила для AI-ассистента
└── README.md # Этот файл
```
## 🛠️ Технологический стек
**Frontend:**
- Next.js 15.3.3 (App Router)
- React 19
- TypeScript 5
- Tailwind CSS 4
**Backend:**
- Express.js 5
- TypeScript (опционально)
## 📦 Установка и запуск
### Локальная разработка (Windows + PowerShell)
```powershell
# Клонировать репозиторий
git clone <repository-url> my-project
cd my-project
# Frontend
cd frontend
npm install
npm run dev
# Открыть http://localhost:3000
# Backend (в отдельном терминале)
cd backend
npm install
node server.js
# Сервер запустится на http://localhost:3001
```
### Production сборка
```powershell
cd frontend
npm run build
# Статические файлы в frontend/out/
```
## 🚢 Деплой на сервер (Ubuntu)
### Настройка сервера
1. Установить Node.js и PM2:
```bash
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo npm install -g pm2
```
2. Клонировать проект:
```bash
cd ~/projects
git clone <repository-url> my-project
cd my-project
```
3. Установить зависимости:
```bash
cd frontend && npm install && cd ..
cd backend && npm install && cd ..
```
4. Собрать фронтенд:
```bash
cd frontend && npm run build
```
5. Настроить PM2:
```bash
pm2 start backend/server.js --name my-project-backend
pm2 start frontend/.next/start.js --name my-project-frontend
# или настроить ecosystem.config.js
```
## 🔧 Настройка проекта
### Переименование проекта
1. Обновить `package.json` в `frontend/` и `backend/`
2. Обновить название в `README.md`
3. Обновить пути в конфигурации (если нужно)
### Переменные окружения
Создайте файлы `.env.local` (frontend) и `.env` (backend) для локальной разработки.
## 📚 Документация
- **[Правила проекта](docs/PROJECT_RULES.md)** - Стандарты кодирования и workflow
- **[База знаний](docs/KNOWLEDGE_BASE.md)** - Архитектура и технические детали
- **[История изменений](docs/CHANGELOG.md)** - Changelog
## 🎯 Стандарты разработки
- Модульная архитектура
- Строгая типизация TypeScript (без `any`)
- ESLint для проверки кода
- Git workflow: разработка в `dev`, слияние в `main`
Подробнее: [`docs/PROJECT_RULES.md`](docs/PROJECT_RULES.md)
## 📝 Лицензия
ISC
## 👤 Автор
Создано на основе стандартов разработки DosAi

72
SETUP.md Normal file
View File

@ -0,0 +1,72 @@
# Настройка проекта после клонирования
## Быстрый старт
1. **Переименуйте проект**
- Обновите `package.json` в `frontend/` и `backend/`
- Обновите название в `README.md`
- Обновите `ecosystem.config.js` (имена процессов PM2)
2. **Установите зависимости**
```powershell
# Frontend
cd frontend
npm install
# Backend
cd ../backend
npm install
```
3. **Настройте переменные окружения**
Создайте файлы:
- `frontend/.env.local` (опционально)
- `backend/.env` (если нужно)
4. **Запустите проект**
```powershell
# Терминал 1 - Frontend
cd frontend
npm run dev
# Терминал 2 - Backend
cd backend
node server.js
```
5. **Настройте Git**
```powershell
git init
git add .
git commit -m "Initial commit"
git remote add origin <your-repository-url>
git push -u origin main
```
6. **Создайте ветку dev**
```powershell
git checkout -b dev
git push -u origin dev
```
## Настройка сервера
1. Обновите информацию в `docs/PROJECT_RULES.md`:
- IP сервера
- Пользователь
- Путь проекта
- Имена процессов PM2
2. Настройте `ecosystem.config.js` под ваши нужды
3. На сервере установите зависимости и соберите проект
## Готово!
Теперь можно начинать разработку. Все правила и стандарты описаны в `docs/PROJECT_RULES.md`

19
backend/package.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "backend",
"version": "1.0.0",
"description": "Express.js backend server",
"main": "server.js",
"type": "commonjs",
"scripts": {
"start": "node server.js",
"dev": "node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^5.1.0",
"body-parser": "^2.2.0"
}
}

6
backend/routes/.gitkeep Normal file
View File

@ -0,0 +1,6 @@
# API Routes
Создавайте здесь отдельные файлы для API маршрутов.
Пример: users.js, products.js и т.д.

43
backend/server.js Normal file
View File

@ -0,0 +1,43 @@
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const PORT = process.env.PORT || 3001;
// Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// CORS (настройте под свои нужды)
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
if (req.method === 'OPTIONS') {
res.sendStatus(200);
} else {
next();
}
});
// Тестовый endpoint
app.get('/api/health', (req, res) => {
res.json({ status: 'ok', message: 'Server is running' });
});
// Пример API endpoint
app.post('/api/example', (req, res) => {
try {
const { data } = req.body;
res.json({ success: true, received: data });
} catch (err) {
res.status(500).json({ success: false, error: err.message });
}
});
// Запуск сервера
app.listen(PORT, () => {
console.log(`🚀 Server is running on http://localhost:${PORT}`);
console.log(`📡 Health check: http://localhost:${PORT}/api/health`);
});

29
docs/CHANGELOG.md Normal file
View File

@ -0,0 +1,29 @@
# История изменений
## [0.1.0] - Шаблон проекта
### Добавлено
- **Next.js 15** приложение с App Router
- **Express.js** бэкенд сервер
- **TypeScript** полная поддержка
- **Tailwind CSS 4** для стилизации
- **ESLint** настроенный
- **Документация** проекта (правила, база знаний)
- **Git workflow** правила
- **Базовая структура** проекта
### Технические детали
- Статический экспорт Next.js (`output: 'export'`)
- CORS настроен для разработки
- Базовая конфигурация для быстрого старта
- Готовые примеры компонентов и API endpoints
## Начало работы
1. Склонируйте этот шаблон
2. Переименуйте проект в `package.json`
3. Настройте под свои нужды
4. Начните разработку!

260
docs/KNOWLEDGE_BASE.md Normal file
View File

@ -0,0 +1,260 @@
# База знаний проекта
## Назначение шаблона
Это шаблон проекта для быстрого старта новых проектов с:
- Next.js фронтендом (App Router)
- Express.js бэкендом
- TypeScript
- Tailwind CSS
- Модульной архитектурой
## Архитектура системы
### Frontend (Next.js)
**Структура:**
```
frontend/
app/ # Next.js App Router страницы
page.tsx # Главная страница
layout.tsx # Общий layout
components/ # React компоненты
lib/ # Утилиты и типы
docs/ # Документация фронтенда
```
**Технологии:**
- Next.js 15.3.3 с App Router
- React 19
- TypeScript 5
- Tailwind CSS 4
- Статический экспорт (`output: 'export'`)
### Backend (Express)
**Структура:**
```
backend/
server.js # Основной файл сервера
routes/ # API маршруты (создавать по мере необходимости)
```
**Технологии:**
- Express.js 5
- body-parser для обработки запросов
## Типы данных
Все типы должны быть определены явно. Используй интерфейсы для сложных структур:
```typescript
// Пример: frontend/lib/types.ts
export interface ApiResponse<T> {
success: boolean;
data?: T;
error?: string;
}
export interface User {
id: string;
name: string;
email: string;
}
```
## API интеграция
### Определение URL
Фронтенд автоматически определяет URL API:
```typescript
const isLocalhost = typeof window !== 'undefined' && window.location.hostname === 'localhost';
const apiUrl = isLocalhost
? 'http://localhost:3001/api'
: 'https://your-api-domain.com/api';
```
### Пример запроса
```typescript
async function fetchData() {
try {
const response = await fetch(`${apiUrl}/endpoint`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ data: 'value' }),
});
if (!response.ok) {
throw new Error('Server error');
}
const result = await response.json();
return result;
} catch (err) {
console.error('API Error:', err);
throw err;
}
}
```
## Добавление новых функций
### Frontend компонент
1. Создать компонент в `frontend/components/`:
```typescript
// components/MyComponent.tsx
export default function MyComponent() {
return <div>Content</div>;
}
```
2. Использовать в странице:
```typescript
// app/page.tsx
import MyComponent from '@/components/MyComponent';
```
### Backend endpoint
1. Добавить маршрут в `backend/server.js` или создать отдельный файл в `backend/routes/`:
```javascript
// backend/server.js
app.post('/api/my-endpoint', (req, res) => {
try {
const { data } = req.body;
// Обработка данных
res.json({ success: true, result: data });
} catch (err) {
res.status(500).json({ success: false, error: err.message });
}
});
```
## Окружение разработки
### Платформы
- **Разработка**: Windows с PowerShell
- **Хостинг**: Ubuntu Linux
### Особенности разработки на Windows
- PowerShell не поддерживает оператор `&&` для цепочки команд
- Используйте `;` или выполняйте команды отдельно
- Пути в Git и конфигах всегда используют `/`, даже на Windows
- При работе через SSH используйте Linux команды
### Локальная разработка (Windows + PowerShell)
```powershell
# Frontend - один терминал
cd frontend
npm install
npm run dev
# Backend - отдельный терминал
cd backend
npm install
node server.js
```
## Деплой
### Сервер
- **ОС**: Ubuntu Linux
- **IP**: (настройте под себя)
- **Пользователь**: (настройте под себя)
- **Путь**: ~/projects/<project-name>
- **Управление процессами**: PM2
### Процессы PM2
- `<app-name>-frontend` - Next.js приложение (статические файлы через serve или nginx)
- `<app-name>-backend` - Express сервер
### Команды деплоя
**С локального Windows (PowerShell):**
```powershell
# Отправить изменения
git push origin dev
# Подключиться и обновить сервер (Ubuntu команды через SSH)
ssh user@server-ip "cd ~/projects/<project-name> && git pull origin dev && cd frontend && npm run build && pm2 restart <app-name>-frontend <app-name>-backend"
```
**Или на сервере напрямую (Ubuntu):**
```bash
cd ~/projects/<project-name>
git pull origin dev
cd frontend && npm run build
pm2 restart <app-name>-frontend <app-name>-backend
```
### Настройка PM2
Создайте `ecosystem.config.js` в корне проекта:
```javascript
module.exports = {
apps: [
{
name: 'my-app-frontend',
script: 'serve',
args: '-s frontend/out -p 3000',
cwd: './',
env: {
NODE_ENV: 'production'
}
},
{
name: 'my-app-backend',
script: 'server.js',
cwd: './backend',
env: {
NODE_ENV: 'production',
PORT: 3001
}
}
]
};
```
Запуск: `pm2 start ecosystem.config.js`
## Обработка ошибок
### API запросы
```typescript
try {
const response = await fetch(apiUrl, { method: 'POST', body: formData });
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (err) {
console.error('API Error:', err);
// Показать сообщение пользователю
throw err;
}
```
### Backend
```javascript
app.post('/api/endpoint', (req, res) => {
try {
// Обработка
res.json({ success: true, data: result });
} catch (err) {
console.error('Error:', err);
res.status(500).json({ success: false, error: err.message });
}
});
```
## Известные особенности
1. **Статический экспорт**: Next.js собирается в статические файлы, нет серверного рендеринга
2. **CORS**: Настроен для разработки, адаптируйте под продакшн
3. **Порты**: Frontend 3000, Backend 3001 по умолчанию

210
docs/PROJECT_RULES.md Normal file
View File

@ -0,0 +1,210 @@
# Правила проекта
## Общие принципы
### 1. Модульность
- Структурируй код по модулям
- Избегай жестких зависимостей между модулями
- Добавление новых функций не должно ломать существующие
### 2. Типизация
- **Запрещено** использовать `any` в TypeScript
- Все типы должны быть определены явно
- Все функции должны иметь явные типы параметров и возвращаемого значения
- Используй интерфейсы для сложных структур данных
### 3. Обработка ошибок
- Все API запросы должны обрабатывать ошибки сети
- Проверяй граничные случаи (деление на ноль, пустые значения и т.д.)
- Возвращай понятные сообщения об ошибках
### 4. Форматирование кода
- Используй ESLint правила проекта
- Код должен проходить `npm run lint` без ошибок
- Production build не должен падать из-за линтера
## Структура проекта
### Frontend (Next.js)
```
frontend/
app/ # Next.js App Router страницы
components/ # React компоненты
lib/ # Утилиты и типы
docs/ # Документация фронтенда
```
### Backend (Express)
```
backend/
server.js # Основной файл сервера
routes/ # API маршруты (создавать по мере необходимости)
```
## Соглашения об именовании
### Файлы и папки:
- Компоненты: `PascalCase.tsx`
- Утилиты: `camelCase.ts`
- Константы: `UPPER_SNAKE_CASE.ts`
- Папки: `kebab-case`
### Переменные и функции:
- Переменные: `camelCase`
- Функции: `camelCase`
- Компоненты: `PascalCase`
- Константы: `UPPER_SNAKE_CASE`
## Работа с Git
### Ветки:
- `main` / `master` - продакшн (стабильная версия)
- `dev` - разработка (активная разработка)
### Стандартный Workflow разработки
#### 1. Разработка в `dev`
Все новые изменения разрабатываются в ветке `dev`:
```bash
# Переключиться на dev
git checkout dev
# Получить последние изменения с сервера
git pull origin dev
# После внесения изменений
git add .
git commit -m "описание изменений"
git push origin dev
```
#### 2. Тестирование на сервере
Перед слиянием в `main` обязательно тестируйте изменения на сервере:
- Залить изменения на сервер (из `dev`)
- Пересобрать фронтенд: `cd frontend && npm run build`
- Перезапустить процессы: `pm2 restart <app-name>-frontend <app-name>-backend`
- Проверить работу функционала
#### 3. Слияние в `main`
После успешного тестирования слить `dev` в `main`:
```bash
# Переключиться на main
git checkout main
# Обновить локальную main
git pull origin main
# Слить dev в main
git merge dev --no-ff -m "Merge dev: краткое описание изменений"
# Отправить на сервер
git push origin main
```
**Важно**: Используйте флаг `--no-ff` для создания merge commit - это сохраняет историю разработки.
#### 4. Feature-ветки (для больших изменений)
Для крупных изменений создавайте feature-ветки от `dev`:
```bash
git checkout dev
git checkout -b feature/new-feature
# Работаете в feature ветке
git push origin feature/new-feature
# Когда готово - мержите в dev
git checkout dev
git merge feature/new-feature
git push origin dev
```
### Коммиты:
- Используй понятные сообщения коммитов на русском или английском
- Один коммит = одно логическое изменение
- Формат: `тип: краткое описание`
- `feat:` - новая функциональность
- `fix:` - исправление ошибки
- `docs:` - изменения в документации
- `refactor:` - рефакторинг кода
- `style:` - форматирование (без изменения логики)
- `test:` - добавление тестов
- `chore:` - обновление зависимостей, конфигов
### Перед коммитом:
1. Проверь линтер: `npm run lint`
2. Убедись, что сборка проходит: `npm run build`
3. Проверь типы: TypeScript должен компилироваться без ошибок
### Перед слиянием в main:
1. ✅ Все изменения протестированы на сервере в `dev`
2. ✅ Линтер не выдает ошибок
3. ✅ Production build собирается успешно
4. ✅ Функционал работает корректно
5. ✅ Нет критических ошибок в консоли браузера
## Окружение разработки
### Платформы
- **Разработка**: Windows с PowerShell
- **Хостинг**: Ubuntu Linux сервер
**Важно учитывать:**
- В PowerShell команды с `&&` не работают, используйте `;` или отдельные команды
- Пути к файлам на Windows используют обратные слеши `\`, но в Git и конфигах используйте `/`
- При работе через SSH с Ubuntu используйте стандартные Linux команды
### Локальная разработка (Windows)
```powershell
# Frontend
cd frontend
npm install
npm run dev
# Backend (в отдельном терминале)
cd backend
npm install
node server.js
```
## Деплой на сервер
### Сервер информация:
- **ОС**: Ubuntu Linux
- **Пользователь**: dosai (настройте под себя)
- **Путь проекта**: `~/projects/<project-name>` (настройте под себя)
- **Управление процессами**: PM2
### Порядок действий:
1. Закоммитить изменения в ветку `dev`
2. Отправить на сервер: `git push origin dev`
3. Подключиться к серверу: `ssh user@server-ip`
4. На сервере (Ubuntu):
```bash
cd ~/projects/<project-name>
git pull origin dev
cd frontend && npm run build
pm2 restart <app-name>-frontend <app-name>-backend
```
## Тестирование
### Локальная разработка:
- Frontend: `npm run dev` (порт 3000)
- Backend: `node server.js` (порт 3001)
### Проверка перед деплоем:
- [ ] Все функции работают корректно
- [ ] Нет ошибок в консоли браузера
- [ ] API запросы работают
- [ ] Production build успешно собирается
- [ ] Линтер не выдает ошибок
## Запрещенные практики
1. ❌ Использование `any` в TypeScript
2. ❌ Хардкод значений, которые должны быть в конфигурации
3. ❌ Коммит без проверки линтера и сборки
4. ❌ Прямые зависимости между несвязанными модулями
5. ❌ Игнорирование ошибок ESLint в production коде

26
ecosystem.config.js Normal file
View File

@ -0,0 +1,26 @@
// PM2 конфигурация для управления процессами
// Настройте под свой проект
module.exports = {
apps: [
{
name: 'template-frontend',
script: 'serve',
args: '-s frontend/out -p 3000',
cwd: './',
env: {
NODE_ENV: 'production',
},
},
{
name: 'template-backend',
script: 'server.js',
cwd: './backend',
env: {
NODE_ENV: 'production',
PORT: 3001,
},
},
],
};

2
frontend/app/globals.css Normal file
View File

@ -0,0 +1,2 @@
@import "tailwindcss";

35
frontend/app/layout.tsx Normal file
View File

@ -0,0 +1,35 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Next.js Template",
description: "Template for Next.js + Node.js projects",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ru">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-gray-800 text-gray-200`}
>
{children}
</body>
</html>
);
}

24
frontend/app/page.tsx Normal file
View File

@ -0,0 +1,24 @@
export default function Home() {
return (
<div className="min-h-screen py-8">
<div className="max-w-4xl mx-auto p-6 space-y-6 bg-gray-800 text-gray-200 rounded-lg shadow-lg">
<h1 className="text-4xl font-bold text-center">
Next.js + Node.js Template
</h1>
<p className="text-center text-gray-400">
Готовый шаблон для быстрого старта проектов
</p>
<div className="mt-8 p-4 bg-gray-700 rounded">
<h2 className="text-2xl font-semibold mb-4">Начало работы</h2>
<ul className="list-disc list-inside space-y-2 text-gray-300">
<li>Настройте структуру проекта под ваши нужды</li>
<li>Добавьте необходимые зависимости</li>
<li>Обновите документацию в папке docs/</li>
<li>Начните разработку!</li>
</ul>
</div>
</div>
</div>
);
}

4
frontend/components/.gitkeep Normal file
View File

@ -0,0 +1,4 @@
# Компоненты React
Создавайте здесь ваши React компоненты.

4
frontend/docs/.gitkeep Normal file
View File

@ -0,0 +1,4 @@
# Документация фронтенда
Размещайте здесь документацию, специфичную для фронтенда.

17
frontend/eslint.config.mjs Normal file
View File

@ -0,0 +1,17 @@
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
});
const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript"),
];
export default eslintConfig;

50
frontend/lib/api.ts Normal file
View File

@ -0,0 +1,50 @@
// Утилиты для работы с API
const getApiUrl = (): string => {
if (typeof window === 'undefined') {
// SSR
return process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
}
const isLocalhost = window.location.hostname === 'localhost';
return isLocalhost
? 'http://localhost:3001'
: process.env.NEXT_PUBLIC_API_URL || 'https://your-api-domain.com';
};
export const apiUrl = getApiUrl();
export interface ApiResponse<T = unknown> {
success: boolean;
data?: T;
error?: string;
}
export async function apiRequest<T = unknown>(
endpoint: string,
options: RequestInit = {}
): Promise<ApiResponse<T>> {
try {
const response = await fetch(`${apiUrl}/api/${endpoint}`, {
...options,
headers: {
'Content-Type': 'application/json',
...options.headers,
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (err) {
console.error('API Error:', err);
return {
success: false,
error: err instanceof Error ? err.message : 'Unknown error',
};
}
}

11
frontend/lib/types.ts Normal file
View File

@ -0,0 +1,11 @@
// Общие типы для проекта
// Примеры типов - адаптируйте под свой проект
export interface ApiResponse<T = unknown> {
success: boolean;
data?: T;
error?: string;
}
// Добавьте свои типы здесь

11
frontend/next.config.ts Normal file
View File

@ -0,0 +1,11 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
output: 'export',
images: {
unoptimized: true,
},
};
export default nextConfig;

28
frontend/package.json Normal file
View File

@ -0,0 +1,28 @@
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.3.3"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@tailwindcss/postcss": "^4",
"tailwindcss": "^4",
"eslint": "^9",
"eslint-config-next": "15.3.3",
"@eslint/eslintrc": "^3"
}
}

9
frontend/postcss.config.mjs Normal file
View File

@ -0,0 +1,9 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;

28
frontend/tsconfig.json Normal file
View File

@ -0,0 +1,28 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}

BIN
structure.txt Normal file
View File

Binary file not shown.