НЕстолица — детальный план разработки

Домен: news.kristyasmi.beget.tech

VPS: Ubuntu, 62.113.97.14, без Docker, Nginx

Стек: Next.js (App Router) + TypeScript + Tailwind + Payload CMS 3 + PostgreSQL + systemd + Certbot

Макет: Figma, node 4161:178

Цель

Региональный медиапортал: главная 1:1 по смыслу макета (десктоп + мобайл), материалы из админки Payload, SEO, наращиваемые разделы новыми коллекциями.

Критерий MVP: редактор публикует статью в /admin → она на главной и по /news/[slug] → сайт открывается по HTTPS на домене.

Ограничения

• ~2 ГБ RAM, без swap по умолчанию. Обязательны swap 2 ГБ и NODE_OPTIONS=--max-old-space-size=768.

• В Figma есть главная, мобайл и UI kit. Страниц статьи, рубрики, поиска нет — каркас + уточнение у дизайнера.

• Node для сборки ставим отдельно (в PATH Cursor только runtime IDE без npm).

Архитектура

Клиент
  → Nginx :80 (редирект) / :443 (TLS Certbot)
    → proxy_pass http://127.0.0.1:3000   # next start (сайт + /admin)
PostgreSQL 127.0.0.1:5432  (БД nestolica)
Медиа: public/media или /var/lib/nestolica/media
systemd: nestolica.service

Новый раздел портала = коллекция или блок homepage + маршрут Next.js.

Информационная архитектура

Маршрут	Экран	Данные
`/`	Главная	global `homepage` + `posts`
`/news/[slug]`	Статья	`posts`
`/category/[slug]`	Лента рубрики	`categories` + `posts`
`/search`	Поиск	`where` по title (позже Meilisearch)
`/authors/[slug]`	Автор	`authors`
`/admin`	CMS	Payload
`/about`, `/legal/*`	Служебные	`pages`
`/robots.txt`, `/sitemap.xml`	SEO	Next metadata

Модель Payload

users

admin / editor. Editor: CRUD своих черновиков, publish по политике доступа.

media

upload, sizes: card, hero, thumb.

authors

name, slug, photo, bio.

posts

title, slug, category, author, excerpt, content (Lexical), cover, _status, publishedAt, isHero, isFeatured, isVideo.

slot (hero-side, grid, footer), image, url, active.

pages

title, slug, content.

global `site`

logo, nav (relation categories), footer columns, socials, copyright.

global `homepage`

hero (relation post или ручной), sections[]: type grid \| video \| ad \| digest, title, posts/limit.

Фронт (UI kit)

Токены CSS:

• акцент красный (из макета, ориентир #E30613)

• текст #1A1A1A, вторичный серый

• фон #fff / шапка белая / футер почти чёрный

• контейнер ~1200–1280px, шапка липкая

Компоненты: Header, Footer, Hero, NewsCard (варианты из kit), NewsGrid, AdSlot, SectionTitle, VideoBlock.

Главная сверху вниз (как в макете): шапка → герой + боковые карточки → ленты → реклама → видео → ещё ленты → футер.

ISR: revalidate = 60. Хук Payload afterChange на posts → revalidatePath('/').

Этапы

Этап 0 — фундамент (этот заход)

Каркас blank + Postgres, коллекции, оболочка, черновая главная, маршруты статьи/рубрики, Nginx/systemd-заготовки, .env.example.

Этап 1 — главная по макету

Пиксельная подгонка секций, адаптив, реальные данные CMS, сид рубрик.

Этап 2 — статья и рубрика

Шаблон материала, «читайте также», лента рубрики. Ждём макет.

Этап 3 — редакция

Роли, медиа, ревалидация, чеклист публикации.

Этап 4 — прод

swap, next build, Nginx, Certbot, systemd, pg_dump cron, robots/sitemap.

Этап 5 — позже

Meilisearch, RSS, Метрика, CDN, комментарии, рассылка.

Этот заход — порядок работ

1. Swap 2 ГБ, Node.js 22 LTS + pnpm, PostgreSQL, пользователь БД.

2. create-payload-app template blank, db postgres.

3. Коллекции и глобалы, типы Payload.

4. Tailwind-токены, Header/Footer.

5. Главная на данных CMS (пустая лента допустима до сида).

6. /news/[slug], /category/[slug].

7. deploy/nginx.conf, deploy/nestolica.service, .env.example.

Вне скоупа сейчас

Figma MCP (нужен логин в Figma), Docker, Meilisearch (мало RAM), CDN.

Статус

Актуально на 17 сентября 2026. Живой сайт: https://news.kristyasmi.beget.tech/

Эта страница плана: https://news.kristyasmi.beget.tech/plan

Файл в репозитории: docs/PLAN.md

Этап	Состояние
0. Фундамент	Сделано
1. Главная по макету	Сделано, контент из CMS
2. Статья и рубрика	Сделано (+ авторы, служебные страницы)
3. Редакция	Сделано: роли, медиа, чеклист публикации, ISR
4. Прод	Сделано: Nginx, HTTPS, systemd. Скрипт бэкапа: `deploy/backup.sh`
5. Позже	RSS, комментарии, рассылка, афиша/объявления, Метрика (номер в админке). Поиск — Postgres. Meilisearch и CDN отложены

Дальше

• Реальные фотообложки вместо цветных заглушек

• Липкая шапка, Open Graph, JSON-LD, favicon, security headers

• Разделы /articles и /podcasts

• Номер Яндекс Метрики в глобале «Сайт»

• Включить timer deploy/nestolica-backup.timer

• Макет статьи/рубрики в Figma, если появится