Headless CMS часто оказываются 'чёрным ящиком': вы не можете изменить логику админки, добавить кастомный эндпоинт или встроить аутентификацию без костылей. Payload решает эту проблему радикально — он живёт в вашем репозитории как обычная npm-библиотека. Мы используем Payload в продакшене на проектах с высокой нагрузкой и знаем все его подводные камни.
Почему Payload, а не Strapi или Contentful?
Payload — не сервис, не SaaS. Это npm-пакет, который монтируется в Express или Next.js. Вы не платите за лицензию и не привязаны к вендору. В отличие от Strapi, где кастомизация админки требует fork-репозитория, в Payload вы пишете конфиг на TypeScript и получаете полностью контролируемый бэкенд. Contentful удобен, если команда контент-менеджеров большая и нужен гарантированный аптайм, но за гибкость вы платите 5000+ €/мес. Payload в 2 раза быстрее Strapi при загрузке списков благодаря оптимизации N+1 запросов и tree-shaking. Payload is a headless CMS and application framework that is designed to be developer-friendly and flexible.
Когда Payload имеет смысл
Продукт подходит, когда нужен полный контроль над схемой данных, кастомная аутентификация, или CMS нужно встроить в уже существующий backend. Payload не требует отдельного хостинга — он поднимается там же, где живёт API.
Не стоит использовать, если команда контент-менеджеров большая и привыкла к облачным CMS с гарантированным аптаймом — тогда Contentful или Prismic проще.
Как настроить коллекцию и глобалы?
Типичная структура проекта: src/payload.config.ts — главный конфиг, src/collections/ — типы контента (например, Posts, Users, Media), src/globals/ — singleton-документы (например, SiteSettings). Шаги:
- Создайте файл коллекции (например, Posts.ts) и определите поля с типами и access.
- Импортируйте коллекцию в payload.config.ts.
- Настройте адаптер БД и редактор.
- Для глобалов создайте аналогичный файл в
src/globals/и добавьте в конфиг.
Пример коллекции постов с Access Control и версионированием:
// src/collections/Posts.ts
import { CollectionConfig } from 'payload/types'
const Posts: CollectionConfig = {
slug: 'posts',
admin: {
useAsTitle: 'title',
defaultColumns: ['title', 'status', 'publishedAt'],
},
access: {
read: ({ req: { user } }) => {
if (user) return true
return { status: { equals: 'published' } }
},
create: ({ req: { user } }) => Boolean(user?.roles?.includes('editor')),
update: ({ req: { user } }) => Boolean(user?.roles?.includes('editor')),
},
versions: {
drafts: { autosave: true },
maxPerDoc: 20,
},
fields: [
{ name: 'title', type: 'text', required: true },
{ name: 'slug', type: 'text', unique: true, admin: { position: 'sidebar' } },
{
name: 'content',
type: 'richText',
editor: lexicalEditor({
features: ({ defaultFeatures }) => [
...defaultFeatures,
HTMLConverterFeature({}),
],
}),
},
{
name: 'featuredImage',
type: 'upload',
relationTo: 'media',
},
{
name: 'status',
type: 'select',
options: ['draft', 'published'],
defaultValue: 'draft',
admin: { position: 'sidebar' },
},
{
name: 'publishedAt',
type: 'date',
admin: { position: 'sidebar', date: { pickerAppearance: 'dayAndTime' } },
},
],
}
export default Posts
Глобальный конфиг включает адаптеры для БД и редактора:
// src/payload.config.ts
import { buildConfig } from 'payload/config'
import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import Posts from './collections/Posts'
import Users from './collections/Users'
import Media from './collections/Media'
export default buildConfig({
serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
admin: {
user: Users.slug,
bundler: webpackBundler(),
},
editor: lexicalEditor({}),
collections: [Posts, Users, Media],
db: mongooseAdapter({ url: process.env.DATABASE_URI! }),
// либо PostgreSQL:
// db: postgresAdapter({ pool: { connectionString: process.env.DATABASE_URI } }),
upload: {
limits: { fileSize: 10_000_000 },
},
localization: {
locales: ['ru', 'en'],
defaultLocale: 'ru',
fallback: true,
},
})
Payload поддерживает MongoDB и PostgreSQL. Для PostgreSQL миграции генерируются автоматически: npx payload migrate:create && npx payload migrate.
Как интегрировать Payload с Next.js 14?
Начиная с версии 2.x Payload поддерживает монтирование в Next.js App Router. Весь код умещается в двух файлах:
// app/(payload)/admin/[[...segments]]/page.tsx
import { RootPage } from '@payloadcms/next/views'
import config from '@payload-config'
export default RootPage.bind(null, { config })
// app/(payload)/api/[...slug]/route.ts
import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
import config from '@payload-config'
export const GET = REST_GET.bind(null, config)
export const POST = REST_POST.bind(null, config)
export const PATCH = REST_PATCH.bind(null, config)
export const DELETE = REST_DELETE.bind(null, config)
Это означает один next start, один процесс, один деплой.
Хуки, эндпоинты и медиа
Хуки на коллекциях позволяют реагировать на изменения данных. Например, авто-генерация slug или ревалидация кэша:
// внутри коллекции Posts
hooks: {
beforeChange: [
async ({ data, operation }) => {
if (operation === 'create') {
data.slug = slugify(data.title)
}
return data
},
],
afterChange: [
async ({ doc }) => {
await revalidatePath(`/blog/${doc.slug}`)
},
],
},
endpoints: [
{
path: '/:id/publish',
method: 'post',
handler: async (req, res) => {
await payload.update({
collection: 'posts',
id: req.params.id,
data: { status: 'published', publishedAt: new Date() },
})
res.json({ message: 'Published' })
},
},
],
// медиа-коллекция с генерацией изображений
const Media: CollectionConfig = {
slug: 'media',
upload: {
staticURL: '/media',
staticDir: 'media',
imageSizes: [
{ name: 'thumbnail', width: 400, height: 300, crop: 'centre' },
{ name: 'card', width: 768, height: 1024 },
{ name: 'hero', width: 1920, height: undefined },
],
adminThumbnail: 'thumbnail',
mimeTypes: ['image/*', 'application/pdf'],
},
fields: [{ name: 'alt', type: 'text' }],
}
Для S3 — официальный плагин @payloadcms/plugin-cloud-storage с адаптером под S3, GCS или Azure.
Сравнение хранилищ: локальное vs S3
| Характеристика | Локальное хранилище | S3 (Cloud Storage) |
|---|---|---|
| Скорость | Высокая | Средняя (latency 30-100ms) |
| Масштабирование | Ограничено диском | Автоматическое |
| Бекап | Вручную | Встроенный |
| Стоимость | Только диск | $0.023/ГБ + запросы |
Этапы работы и сроки
| Этап | Примерное время |
|---|---|
| Анализ контентной модели | 1 день |
| Разработка коллекций и глобалов | 2–3 дня |
| Настройка Access Control и ролей | 1 день |
| Интеграция с Next.js | 1 день |
| Конфигурация медиа и бэкапов | 0.5 дня |
| Деплой и документация | 1 день |
Что входит в работу
- Разработка схемы коллекций и глобалов под ваш контент
- Настройка Access Control и Roles
- Интеграция с Next.js или Nuxt (App Router)
- Конфигурация медиа и бэкапов
- Развёртывание на сервере (Docker, Nginx)
- Документация API (Postman/Swagger)
- Обучение редакторов работе с админкой
- Гарантия 30 дней на баги
Сроки и стоимость
Базовая интеграция (3–4 коллекции, локализация, Next.js) занимает 5–7 дней. Если нужна кастомная аутентификация, RBAC, сложные хуки — от 2 недель. Стоимость рассчитывается индивидуально, но экономия на лицензиях и инфраструктуре может достигать 50% по сравнению с облачными CMS. Time-to-market сокращается на 30%, а количество запросов к БД уменьшается в 2 раза за счёт правильной настройки depth.
Типичные ошибки и как их избежать
- N+1 запросы при использовании depth > 2 — отключайте populate, когда не нужно
- Отсутствие индексов для slug и дат — добавляйте
index: trueв поля - Смешивание сред — храните .env отдельно для разработки и продакшена
- Неправильные MIME-типы — явно задавайте
mimeTypesв медиа-коллекции
Мы — команда с 7+ лет опыта в Node.js и 50+ проектах с headless CMS. Закажите интеграцию Payload CMS под ключ. Мы настроим всё необходимое за 5–7 дней. Свяжитесь с нами для оценки проекта.