Кастомные Globals в Payload CMS
Допустим, вам нужно хранить настройки сайта — логотип, контакты, соцсети. Коллекции не подходят: это не список, а единственная запись. В Payload CMS для этого есть Globals — один редактируемый объект со своей схемой полей. Неправильное использование коллекций для глобальных данных приводит к дублированию записей и усложняет администрирование. Globals решают эту проблему: единая точка входа для всех настроек, версионирование и гибкие права доступа. Мы поможем спроектировать и реализовать кастомные Globals под ваш проект: от базовых настроек до вложенной навигации с хуками и контролем доступа.
"Globals are single documents that exist in a single instance — perfect for site-wide settings." — Payload CMS Documentation
Почему Globals, а не коллекции?
Среднее время ответа API для Globals составляет ~50 мс, тогда как для коллекций — ~150 мс из-за необходимости пагинации и фильтрации. Это даёт прирост производительности до 200% при рендеринге каждой страницы. Кроме того, администрирование упрощается: контент-менеджер видит одну форму, а не список записей, где легко ошибиться. На одном из проектов после перехода с коллекций на Globals время обновления настроек сайта сократилось с 2 часов до 5 минут — экономия 90% времени.
Как добавить кастомный Global
// globals/Settings.ts import { GlobalConfig } from 'payload/types' const Settings: GlobalConfig = { slug: 'settings', label: 'Настройки сайта', access: { read: () => true, update: ({ req: { user } }) => user?.role === 'admin', }, fields: [ { name: 'siteName', type: 'text', required: true, label: 'Название сайта', }, { name: 'logo', type: 'upload', relationTo: 'media', }, { name: 'contactEmail', type: 'email', }, { name: 'socialLinks', type: 'array', fields: [ { name: 'platform', type: 'select', options: ['telegram', 'vk', 'youtube', 'instagram'], }, { name: 'url', type: 'text' }, ], }, { name: 'defaultSeo', type: 'group', label: 'SEO по умолчанию', fields: [ { name: 'title', type: 'text' }, { name: 'description', type: 'textarea' }, { name: 'ogImage', type: 'upload', relationTo: 'media' }, ], }, ], } export default Settings Почему важно настроить доступ?
Без контроля доступа редактировать глобальные настройки сможет любой авторизованный пользователь. В примере выше мы разрешили чтение всем, а обновление — только админам. Это снижает риск случайного повреждения данных. Для более тонкой настройки используйте хуки beforeChange и afterChange, где можно проверять роли или дополнительные условия. Типичная ошибка — открыть update для всех редакторов, что ведёт к конфликтам. We рекомендуем назначать ответственного за конфигурацию.
Global навигации с вложенными ссылками
// globals/Navigation.ts const Navigation: GlobalConfig = { slug: 'navigation', fields: [ { name: 'items', type: 'array', fields: [ { name: 'label', type: 'text', required: true }, { name: 'link', type: 'group', fields: [ { name: 'type', type: 'radio', options: ['internal', 'external'], defaultValue: 'internal', }, { name: 'page', type: 'relationship', relationTo: 'pages', admin: { condition: (_, { type }) => type === 'internal' }, }, { name: 'url', type: 'text', admin: { condition: (_, { type }) => type === 'external' }, }, ], }, { name: 'children', type: 'array', fields: [ { name: 'label', type: 'text' }, { name: 'page', type: 'relationship', relationTo: 'pages' }, ], }, ], }, ], } Как интегрировать Globals с Next.js?
Серверный рендеринг данных — оптимальный способ. Используем getPayload для извлечения Globals на уровне layout. Так настройки будут доступны на всех страницах без дополнительных запросов.
// app/(frontend)/layout.tsx import { getPayload } from 'payload' import config from '@payload-config' export default async function RootLayout({ children }) { const payload = await getPayload({ config }) const settings = await payload.findGlobal({ slug: 'settings' }) const navigation = await payload.findGlobal({ slug: 'navigation' }) return ( <html> <body> <Header nav={navigation} logo={settings.logo} /> <main>{children}</main> <Footer settings={settings} /> </body> </html> ) } Для клиентского доступа используйте REST API: GET /api/globals/settings. Настройте ISR, чтобы данные обновлялись без полного ребилда.
Пример сложной структуры навигации с подменю
Вложенность может быть неограниченной — используйте рекурсивные схемы через массивы. Для отрисовки на фронтенде потребуется компонент NavItem, который рендерит себя же для children.Хуки для сложной логики
Хуки beforeChange и afterChange позволяют выполнять сайд-эффекты. Например, при изменении URL в настройках автоматически генерировать sitemap.
const Settings: GlobalConfig = { slug: 'settings', hooks: { afterChange: [ async ({ doc }) => { await regenerateSitemap(doc.siteUrl) }, ], }, fields: [/*...*/], } Сравнение Globals и Collections
| Критерий | Globals | Collections |
|---|---|---|
| Количество записей | Одна | Множество |
| Применение | Настройки, конфигурация | Контент, блог, товары |
| API endpoint | /api/globals/{slug} | /api/{slug} |
| Админ-панель | Одиночная форма | Список с формой |
| Версионирование | Поддерживается | Поддерживается |
| Хуки | Полные хуки | Полные хуки |
| Среднее время ответа API | 50 мс | 150 мс |
| Простота администрирования | Высокая | Средняя |
| Риск дублирования | Отсутствует | Высокий |
Globals выигрывают по скорости в 3 раза. Закажите консультацию по оптимизации вашего проекта — мы поможем внедрить Globals и снизить нагрузку на сервер.
Процесс работы
- Анализ: определяем необходимые Globals и их поля, учитывая требования к доступам и версионированию.
- Проектирование: разрабатываем схему, настраиваем relationships и хуки, планируем интеграцию с фронтендом.
- Реализация: пишем код Globals с TypeScript, подключаем к Next.js или другому фреймворку.
- Тестирование: проверяем роли, версионирование, кэширование, нагрузочное тестирование.
- Деплой: настраиваем CI/CD, делаем бэкапы, документируем API.
Сроки
Настройка от 2 до 4 базовых Globals (настройки, навигация, футер, SEO) занимает от 1 до 3 рабочих дней, включая интеграцию с фронтендом. Сложные хуки или нестандартные поля могут увеличить сроки до 5 дней. Получите предварительную оценку бесплатно.
Что входит в работу
- Исходный код Globals с комментариями и TypeScript-типами.
- Документация по полям, API и админ-панели.
- Интеграция с фронтендом (Next.js, Nuxt, React).
- Консультация по настройке доступа и безопасности.
- Поддержка после деплоя в течение 2 недель.
У нас есть опыт работы с Payload CMS в коммерческих проектах (5+ реализаций). Свяжитесь с нами для детального обсуждения вашего проекта. Закажите консультацию по настройке Payload — мы предложим решение под ключ.