Забудьте про разрыв между фронтендом и бэкендом в Next.js

Знакомая история: вы начинаете проект на Next.js, все идет отлично, пока не встает вопрос выбора CMS. И тут начинаются мучения. Взять Headless-решение вроде Contentful или Strapi — значит мучиться с сетевыми задержками и постоянными запросами к API. Попробовать классику вроде WordPress — превратить проект в «франкенштейна», где frontend живет своей жизнью, а админка — своей. Payload предлагает вариант, который долгое время казался невозможным: просто положите CMS в папку /app вашего проекта.

Что это вообще такое

Payload — это не просто очередная «голова» для управления контентом. С выходом версии 3.0 проект окончательно переехал на рельсы Next.js. Теперь это полноценный фреймворк, который живет внутри вашего приложения. Технически это выглядит так: вы устанавливаете пакет, и у вас в проекте появляется готовая админка на React, авторизация и слой работы с базой данных.

Главное отличие от собратьев по цеху в том, что Payload не требует от вас писать fetch-запросы к самому себе. Вы находитесь внутри одного процесса. Если вам нужны данные из базы в React Server Component, вы просто импортируете локальное API и вызываете нужный метод. Никаких HTTP-оверхедов.

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

В работе с Payload есть несколько моментов, которые сильно упрощают жизнь.

Работа с данными напрямую в Server Components

Забудьте про создание эндпоинтов только для того, чтобы прокинуть данные в компонент. В Payload вы делаете так:

import { getPayload } from 'payload'
import config from '@/payload.config'

const Page = async () => {
  const payload = await getPayload({ config })
  const posts = await payload.find({
    collection: 'posts',
  })

  return (
    <ul>
      {posts.docs.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Это быстро, типизировано и безопасно. Вы не светите ключи API на клиенте, потому что код исполняется на сервере.

Автоматическая типизация

Payload читает вашу конфигурацию коллекций (схем данных) и генерирует типы TypeScript. Если вы переименовали поле в конфиге, проект упадет на этапе компиляции, а не когда пользователь нажмет на кнопку. В моей практике это спасает от 90% глупых ошибок при обновлении структуры контента.

Блочный конструктор вместо каши из HTML

Одна из самых крутых фич — это Blocks. Вместо того чтобы давать редактору контента один огромный текстовый редактор, где он обязательно все сломает, вы создаете набор блоков: «Галерея», «Цитата», «Форма обратной связи». Каждый блок — это отдельный React-компонент. Редактор собирает страницу как конструктор, а вы просто мапите эти блоки на свои UI-компоненты.

Техническая начинка и гибкость

Проект не пытается запереть вас в своей песочнице. В качестве базы данных можно использовать MongoDB или PostgreSQL (через Drizzle). Это важно, так как многие CMS до сих пор завязаны на одну конкретную БД.

Архитектура построена вокруг концепции Hooks. Хотите отправлять письмо после регистрации пользователя? Добавьте afterChange хук в коллекцию Users. Нужно проверить права доступа на уровне конкретного поля? Пишете функцию в access и готово. Причем это не какой-то специфичный DSL, а обычный JavaScript/TypeScript.

Как попробовать быстро

Самый простой способ оценить мощь — развернуть готовый шаблон сайта. Ребята из Payload подготовили отличные стартеры с Tailwind и Live Preview (когда вы меняете текст в админке и сразу видите результат на странице).

pnpx create-payload-app@latest -t website

Кстати, админка полностью настраивается. Если вам не нравится стандартный вид какого-то поля, вы можете заменить его на свой React-компонент. Хоть вставьте туда интерактивную карту или график из D3.js.

Кому это нужно

Payload идеально подойдет, если:

• Вы строите проект на Next.js и не хотите плодить лишние микросервисы.
• Вам нужна CMS с человеческой типизацией и нормальным DX (Developer Experience).
• Вы устали от ограничений SaaS-решений, где за каждое дополнительное поле или пользователя нужно доплачивать.

Если же вам нужна простая анонимная форма на лендинг из одной страницы, Payload может показаться избыточным — все-таки это полноценный бэкенд со своей логикой и требованиями к хостингу.

В целом, это один из тех редких проектов, где чувствуется, что его писали разработчики для разработчиков. Никакого «магического» кода, все предсказуемо и прозрачно. Однозначно стоит того, чтобы закинуть в закладки или попробовать в пет-проекте.