MosHub

Next.js проект с интегрированной CMS на базе Payload CMS.

Технологии

• Next.js 16 — React фреймворк
• Payload CMS 2.x — Headless CMS с админ-панелью
• PostgreSQL — База данных
• Sharp — Оптимизация изображений (WebP, AVIF)

Начало работы

1. Установка зависимостей

yarn install

Получение архива с зависимостями:

 ./scripts/pack-offline-cache.sh linux-x64-gnu

2. Настройка окружения

Скопируйте .env.example в .env и заполните переменные:

cp .env.example .env

Основные переменные для Payload CMS:

• DATABASE_URL — строка подключения к PostgreSQL
• PAYLOAD_SECRET — секретный ключ (измените в production!)
• PAYLOAD_PUBLIC_SERVER_URL — URL сервера

3. Запуск PostgreSQL (локальная разработка)

yarn db:postgres

Это запустит PostgreSQL в Docker контейнере с настройками:

• Host: localhost:5432
• User: moshub
• Password: moshub_secret
• Database: moshub_cms

4. Запуск dev сервера

yarn dev

• Сайт: http://localhost:3000
• Админ-панель: http://localhost:3000/admin

При первом запуске создайте администратора через форму регистрации в админ-панели.

Payload CMS

Коллекции

Глобальные настройки

• Site Settings — общие настройки сайта
• Global SEO — SEO настройки по умолчанию

Роли пользователей

Оптимизация изображений

При загрузке изображений автоматически создаются варианты:

SEO

Каждая статья, страница и событие имеет SEO поля:

• Meta Title
• Meta Description
• Keywords
• OG Image
• Canonical URL
• noindex/nofollow

Если SEO не заполнено, используются значения из Global SEO.

Скрипты

yarn dev              # Запуск dev сервера
yarn build            # Сборка для production
yarn start            # Запуск production сервера
yarn db:postgres      # Запуск PostgreSQL в Docker
yarn db:postgres:stop # Остановка PostgreSQL
yarn generate:types   # Генерация TypeScript типов Payload
yarn lint             # Проверка кода
yarn format           # Форматирование кода

API

REST API доступен по адресу /api:

GET    /api/articles        # Список статей
GET    /api/articles/:id    # Статья по ID
GET    /api/pages           # Список страниц
GET    /api/events          # Список событий
GET    /api/media           # Список медиа
GET    /api/globals/global-seo  # Глобальные SEO настройки

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

src/
├── app/
│   ├── (payload)/          # Payload admin routes
│   │   ├── admin/          # Admin panel
│   │   └── layout.tsx
│   ├── api/
│   │   └── (payload)/      # Payload REST API
│   └── [locale]/           # Локализованные страницы
├── payload/
│   ├── collections/        # Коллекции Payload
│   ├── globals/            # Глобальные настройки
│   ├── fields/             # Переиспользуемые поля
│   ├── access/             # Правила доступа
│   ├── payload.config.ts   # Конфигурация Payload
│   └── payload-types.ts    # Сгенерированные типы
└── ...

Production

Для production необходимо:

1. Изменить PAYLOAD_SECRET на уникальный ключ
2. Настроить внешнюю PostgreSQL базу данных
3. Настроить хранение медиа-файлов (S3/CDN при необходимости)