Разработка кастомных глобалей (Globals) Payload CMS

Кастомные 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, чтобы данные обновлялись без полного ребилда.

Хуки для сложной логики

Хуки beforeChange и afterChange позволяют выполнять сайд-эффекты. Например, при изменении URL в настройках автоматически генерировать sitemap.

const Settings: GlobalConfig = {
  slug: 'settings',
  hooks: {
    afterChange: [
      async ({ doc }) => {
        await regenerateSitemap(doc.siteUrl)
      },
    ],
  },
  fields: [/*...*/],
}

Сравнение Globals и Collections

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 — мы предложим решение под ключ.