Initial commit: Next.js + Node.js template
This commit is contained in:
commit
4790609e92
105
.cursorrules
Normal file
105
.cursorrules
Normal 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
49
.gitignore
vendored
Normal 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
146
README.md
Normal 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
72
SETUP.md
Normal 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
19
backend/package.json
Normal 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
6
backend/routes/.gitkeep
Normal file
@ -0,0 +1,6 @@
|
||||
# API Routes
|
||||
|
||||
Создавайте здесь отдельные файлы для API маршрутов.
|
||||
|
||||
Пример: users.js, products.js и т.д.
|
||||
|
||||
43
backend/server.js
Normal file
43
backend/server.js
Normal 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
29
docs/CHANGELOG.md
Normal 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
260
docs/KNOWLEDGE_BASE.md
Normal 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
210
docs/PROJECT_RULES.md
Normal 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
26
ecosystem.config.js
Normal 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
2
frontend/app/globals.css
Normal file
@ -0,0 +1,2 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
35
frontend/app/layout.tsx
Normal file
35
frontend/app/layout.tsx
Normal 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
24
frontend/app/page.tsx
Normal 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
4
frontend/components/.gitkeep
Normal file
@ -0,0 +1,4 @@
|
||||
# Компоненты React
|
||||
|
||||
Создавайте здесь ваши React компоненты.
|
||||
|
||||
4
frontend/docs/.gitkeep
Normal file
4
frontend/docs/.gitkeep
Normal file
@ -0,0 +1,4 @@
|
||||
# Документация фронтенда
|
||||
|
||||
Размещайте здесь документацию, специфичную для фронтенда.
|
||||
|
||||
17
frontend/eslint.config.mjs
Normal file
17
frontend/eslint.config.mjs
Normal 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
50
frontend/lib/api.ts
Normal 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
11
frontend/lib/types.ts
Normal file
@ -0,0 +1,11 @@
|
||||
// Общие типы для проекта
|
||||
|
||||
// Примеры типов - адаптируйте под свой проект
|
||||
export interface ApiResponse<T = unknown> {
|
||||
success: boolean;
|
||||
data?: T;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
// Добавьте свои типы здесь
|
||||
|
||||
11
frontend/next.config.ts
Normal file
11
frontend/next.config.ts
Normal 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
28
frontend/package.json
Normal 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
9
frontend/postcss.config.mjs
Normal file
@ -0,0 +1,9 @@
|
||||
/** @type {import('postcss-load-config').Config} */
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
28
frontend/tsconfig.json
Normal file
28
frontend/tsconfig.json
Normal 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
BIN
structure.txt
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user